useEffect
component가 re-rendering 될 때마다 특정 기능을 수행하는 hook
기본 형태는 useEffect(func, deps)로, func에는 함수가, deps에는 종속 조건이 배열 형태로 들어간다.
useEffect(func)
상기 코드는 deps를 설정하지 않고 함수만 채운 상태다. 모든 버튼에 반응하며 렌더링한다. 콘솔창을 확인하면 더 쉽게 알 수 있는데, 어느 버튼을 누르든 페이지가 다시 렌더링되며 콘솔 내 문구의 횟수 또한 증가한다.
useEffect(func, [])
다음은 deps에 빈 배열([])을 추가한 형태다. 이것은 처음 렌더링될 때만 기능을 수행하고, 이후에는 수행하지 않는다. 위 코드와 다르게 버튼을 눌러도 제목의 숫자나 콘솔이 반응하지 않는다.
useEffect(func, [deps])
내가 아는 마지막 형태는 deps의 배열에 변수를 할당하는 것이다. useEffect의 deps에 [number]를 할당하면 해당 변수의 렌더링 외에는 동작하지 않는다. 첫 번째 버튼을 클릭하면 h2의 첫 번째 숫자와 콘솔이 반응하지만, 두 번째 버튼은 아무리 눌러도 버튼 숫자만 증가할 뿐, 제목의 숫자와 콘솔은 조용하다.
형태와 별개로 메모리 누수를 방지하기 위한 clean-up 함수가 있다. 강의를 들으면서 나온다면 다시 정리하고, 안 나오면 완강 후 혼자 정리해봐야겠다.
참고
리액트 hook useState 문서: https://ko.reactjs.org/docs/hooks-effect.html
노마드코더 실전형 리액트 hooks: https://nomadcoders.co/react-hooks-introduction/lobby
useEffect 잘 정리된 블로그 : https://xiubindev.tistory.com/100
