[React] useEffect 정리

0. 왜 작성하는가?

그 동안 그냥 사용하던 useEffect에 대해 좀 더 명확하게 알아야 겠다는 생각이 들었다.
Cowitter를 수정하는 과정에서도 계속 부딪히는 문제이기도 하다.

useEffect 예제 코드

1. useEffect의 기본적인 동작방식

공식 문서에도 잘 나와있듯이 Effect는 렌더링 이후에 실행해야 할 일을 의미한다.

2. useEffect의 의존성 배열

useEffect( () => {} , [deps])

의존성 배열에 값을 넣으면 업데이트를 할 때, 이전 state와 비교하여, 값이 달라지는 경우에만 effect를 실행합니다. 여러개의 값이 들어가는 경우, 여러 값 중 하나라도 변경되면, effect를 실행한다.

3. 의존성 배열에 들어가는 값

이전 값과 비교할 때 Object.is를 사용하기 때문에 reference 형태의 값이 의존성 배열에 들어가게 되면 항상 effect를 실행하게 된다. useEffect를 사용하는데 무한 루프가 돈다면 이 부분을 의심해보자.

해결 방법

• JSON.stringfy를 통한 value 비교
• Object.entries(obj).toString() 이용
• lodash _.isEqual 사용

4. multiple useEffect의 경우는?

useEffect가 선언된 순서대로 동작한다.