Monsters-Rolodex 2-1 | Functional Component 시작

지금까지 class component를 이용해 코드를 작성했었다. 

이제는 functional component를 이용해 다시 새롭게 코드를 짜보자. 

 

 

이 두 메소드의 큰 차이점은 

functional component에는 lifecycle이 없다는 것이다. 

 

 

보일러 플레이트 

class component에서 썼던 

constructor(), componentDidMount(), render() 등 

lifecycle method는 이제 필요가 없다. 

 

 

 

 

대신 function을 사용하고 

위에서부터 아래로 순서대로 코드가 실행된다. 

class method에서는 render() 함수에 든 내용이 UI에 나타났지만 

functional method는 return이 되는 부분이 UI에 나타난다 

 

 

 

화면에 Hello World 가 나오도록 해보자.

 

 

 

브라우저에 잘 나오는 것을 볼 수 있다. 

 

 

 

리액트 function도 자바스크립트 function과 같이

arguments를 받고 return으로 내용을 반환한다. 

하지만 리액트는 argument로 props로 받고 

jsx 파일 형태를 return한다. 

 

 

어떤 사람은 life cycle과 같은 방식으로 

비슷한 Hooks를 찾아 사용하는 사람이 있는데 그러면 안된다. 

functional component은 완전 다른 방식이다. 

functions의 개념과 side effects에 대해 알아야 한다. 

 

side effects를 이해하기 전 

pure function과 impure function에 대한 이해가 필요하다. 

 

다음 포스트에서는 

function,

pure function,

impure function,

side effect 에 대해 알아보자. 

 

이 것들을 이해해야 리액트 functional component를 깊이 이해할 수 있게 된다.