ReactJS 의 마법같은 일은 그것이 컴포넌트를 수정하고, 화면을 새로고침하는데에 있다.
즉, 새로운 데이터가 들어올때마다 UI 가 refresh 됨을 의미한다.
하지만 이런 경우에 문제가 생길때가 있다. 언제? 컴포넌트 안에 한번만 실행시키고 싶은 코드가 있거나 특정 state의 변화에 의해서만 UI를 refresh 하고 싶을 때가 있기 때문이다.
이전에는 코드가 언제 실행되어야 할 지 결정할 수 없었는데, 이제는 가능하게 됐다.
useEffect 가 이를 가능하게 해주었다.
useEffect는 두 개의 인자를 가지는 함수이다.
첫번째 인자는 우리가 실행시키고 싶은 코드였고
그리고 두번째 인자는 dependencies 라고 부르는, react.js 가 지켜보아야할 대상들을 가르킨다. 그것이 변화할때, 첫번째 인자의 코드를 실행시킨다.
depency가 없는 경우 첫번째 인자를 한번만 실행시킨다. 왜냐 react js 가 지켜보아야할 대상이 없기 때문에 변화가 없어서 처음한번만 실행이 되는 것이다. 하나 이상의 것을 넣을 수 있다.
useEffect는 reactJS 가 동작하는 관점에서 보면 방어막같은 역할을 한다.
왜냐하면 ReactJS는 아주 단순하게 동작하는데 state가 변화면 refresh를 하는 것이다. UI의 관점에서는
return 문 안에서 자바스크립트를 쓰려면 {} 중괄호를 열어야 한다.
Component 는 단지 JSX를 return 해주는 함수일 뿐이다.
reactJS 가 Component 가 destroy 될때에도 코드를 실행을 시켜줄 수 있다.
코드를 숨기는 것이 아니라 destroy 한다.
이게 사라질 때에도 function을 불러주고 싶을 수 있다.
이런걸 Cleanup function 이라고 하는 것이다.
누군가는 component 가 사라질때 어떤 분석 결과를 얻고 싶을 수 있을 것이다. 그러면 그 사람은 분석 API 요청을 보낼 수 도 있을 것이다.
동일한 역할을 하는 코드
익명의 함수를 생성하는 방법이 두 가지가 있는데
1. function () {}
2. ()=> {}
둘 다 함수를 선언하는 것이지만 다수는 2번을 사용한다.
아래 세가지의 코드는 동일한 동작을 수행한다.
아무래도 마지막 세번째가 제일 좋아보인늗
