리액트는 state가 변경되면 component들이 다시 렌더링 된다.
그렇다면, 특정 코드들이 첫 번째 component render에만 실행되도록 하고 싶거나 중요한 API나 특징이 있는 component를 한 번만 실행되도록 하고싶다면 어떻게 해야할까? (API call의 경우, 반복되는 것은 아주 비효율적이다)
이럴 때 useEffect를 사용해준다.
useEffect는 쉽게 말해, 코드를 원할 때 실행될 수 있도록 보호해주는 function이다.
useEffect()는 2개의 argument를 가진다.
첫 번째 argument는 딱 한 번 실행하고 싶은 코드를 넣는다.
두 번째 대괄호에 들어가는 것은 dependencies로 첫번째에 들어간 'argument'가 변화할 때만 반응하겠다 라는 뜻으로 그 'argument'를 넣어주면 된다. (react.js 가 지켜보겠다 라고 이해하면 쉬움)
useEffect(() => (), [])
2번째 인자에 빈 배열을 넣게 되면 자연스럽게 리액트는 빈 공간이기에 한번만 렌더링 하게 되는 것이다.
- 빈배열: 지켜볼 게 없네? 한 번만 출력
- 특정 키워드 : 키워드가 있네? 반응 시 출력
또한 두 번째 dependencies는 배열이기 떄문에 여러 개가 들어갈 수 있다. - 특정 키워드들 : 이 키워드들이 나올 때 실행해야겠다!
useEffect를 활용할 수 있는 방안
- component의 렌더링 시작점을 컨트롤할 수 있다. (언제 코드가 실행되는지)
- 특정한 keyword가 업데이트될 때만 코드가 실행되게 할 수 있다.
Cleanup function
component가 destroy 될 때도 실행이 가능하다.
create, destroy 단계에서 useEffect를 사용한다
inspect에서 element를 보면 코드자체가 사라지는 걸 알 수 있다.
누군가는 destroy될 때, 분석결과(API)를 보내고 싶을 수 있다. 이벤트를 지우고 싶거나, 어떤 경우에서도 가능하다.
cleanup function은 return에 대한 명확한 이해가 필요하다.
aFn()을 useEffect에서 썼다면, 파괴했을 때 bFn()을 실행시키기 위해선
aFn의 return을 bFn()으로 해주어야 한다.
