[React] useEffect에 대해 알아야 할 사항

 

 useEffect는 component가 rendering이 된 후 실행된다. 보통 component가 필요로 하는 데이터를 request 하는 용도로 많이 쓰인다.

 

dependency array

• 어떤 값이 변할 때마다 useEffect 가 다시 실행되도록 하려면 dependency array에 해당 값을 넣어준다.
• 부모 컴포넌트에서 보내는 props가 변경되는 감지하여 re-rendering을 할 경우 해당 props를 dependency array에 추가해준다.
• useEffect의 밖에 선언된 함수 또는 변수를 useEffect 안에서 사용할 경우 dependency array에 할당하라는 에러가 발생한다.
• 리액트에서는 이전 값과 함수들이 저장되지 않기 때문에 component에 업데이트가 있을 때마다 함수를 재생성하게 된다. 따라서 useEffect 안에서 밖의 함수를 사용하게 된다면, dependency array에 할당하라고 권고한다.
• dependency array를 사용하지 않는다면 useEffect는 컴포넌트가 첫번째 랜더링 될 때 한 번 발생한다. 즉, 라이프사이클의 첫번째에서 한 번 실행되고 새로고침을 하지 않는 이상 실행되지 않는다.

무한렌더링

• useEffect 에서 state 값을 변경하면 re-rendering이 되고 useEffect가 다시 작동하게 되어 무한렌더링이 발생한다. 이를 막기 위해서는 empty array를 할당해야 한다.

 

useEffect 에러 해결법

• 만약 useEffect 안에서만 사용되는 함수라면, useEffect 안에 함수를 선언한다.
• useCallback 으로 함수를 저장함으로써 컴포넌트가 업데이트 되도 re-render를 발생하지 않게 한다.
• useEffect 안에 사용되는 함수, 변수들이 바뀌지 않음에도 불구하고 ESLint는 계속해서 경고를 주고 있다. ESLint 를 끄든지, dependency array에 추가하거나 아예 추가하지 않는 것을 택할 수도 있다. ESLint 는 해당 함수, 변수가 불변인지 아닌지를 모르기 때문에 경고를 하는 것으로 추측된다.