useEffect가 필요한 이유와 사용법

useEffect 훅을 사용하면 컴포넌트가 마운트, 언마운트, 업데이트 시 할 작업을 설정할 수 있다. (마운드, 언마운트는 각각 컴포넌트가 나타나고 사라지는 것을 말한다.) 이를 이용해 애플리케이션 내에서 벌어지는 사이트 이펙트 (리액트의 관심사가 아닌 것)를 제어할 수 있게 된다.

useEffect가 필요한 이유

예를들어 페이지에 접속했을 때, get요청으로 데이터를 받아와 화면에 보여주는 컴포넌트가 있다고 해보자. 이런 기능은 get요청을 받은 다음에 화면에 뿌려줘야 하기 때문에 데이터를 state로 처리한다. 그런데 useEffect가 없다면 state가 변경될 때마다 계속 다시 컴포넌트 함수가 실행될 것이다. 컴포넌트 함수가 실행되면 다시 get요청을 하고, 다시 받아온 데이터로 state변경이 일어나므로 무한루프에 빠지게 된다.

useEffect는 특정 조건 (컴포넌트가 마운드, 언마운트, 업데이트 시)에만 함수를 실행하게 해주므로 위 현상을 막을 수 있다.

사용방법

1. react에서 useEffect 훅을 import해온다.
2. useEffect는 함수인데
   1. 첫번째 파라미터에는 함수
   2. 두번째 파라미터에는 deps라는 배열을 등록한다.
3. return은 뒷정리 함수라서 업데이트 되기전에 호출된다.
4. 내부에서 다룰 상태가 있다면 deps에서 써주어야 한다.

참고로 만약에 두번째 인자를 빠뜨린다면 컴포넌트 함수가 실행될때마다 useEffect함수 또한 실행이 되므로 바뀌는 것이 없다. 만야게 두번째 인자 값에 빈 배열을 넣는다면 딱 첫번째로 렌더링할 뙤만 useEffect안의 함수를 실행시켜준다. 의존하고 있는 값 (두번째 인자)가 있다면 그 인자가 업데이트 될때마다 다시 useEffect안의 함수를 실행시켜준다.