React Hooks useEffect

프로젝트 진행 중 모달 창에서 선택된 탭의 ID에 따라 부모 페이지로 다른 데이터를 전달해야 했다. useEffect에 대한 정확한 이해 없이 사용했더니 항상 고정된 값이 전달되거나(dependency를 설정하지 않았기 때문) 다른 모달을 선택해도 이전의 값이 전달(useEffect를 이용한 초기화를 하지 않음)되는 등의 문제가 생겼다. 이 기회에 정확하게 정리하고 넘어가려고 한다.

---

 

React Hooks에서 useState와 더불어 가장 많이 사용하는 useEffect다. useEffect는 렌더링이나 특정 값이 달라지는 이벤트가 발생하면 그것을 인지하고 업데이트 해주는 함수다. 

 

앞서 설명했듯이 useEffect는 크게 다음과 같은 조건에 의해 작동한다.

1. 페이지가 처음 렌더링 됐을 때 (렌더링 시 무조건 한 번 실행됨)
2. 배열로 지정한 useState의 값이 변경됐을 때

 

useEffect의 사용법은 총 3가지가 있다.

useEffect(() => {});

위의 형태는 useEffect의 가장 기본적인 형태지만, dependency가 없기 때문에 작은 변화 하나하나에도 실행되어 매우 비효율적이다. 따라서 거의 사용하지 않는다.

 

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

콤마 뒤의 배열이 useEffect의 dependency를 지정해주는 부분이다. 위의 코드에서는 빈 배열이 지정되어 있기 때문에 렌더링 후 단 한 번만 useEffect가 실행된다. 따라서 딱 한 번만 값을 업데이트하고 싶은 경우에 사용한다.

 

const [data, setData] = useState();
useEffect(() => {}, [data]);

위의 코드에서는 data라는 변수가 dependency로 지정되어 있다. 따라서 이 경우 useEffect는 렌더링 후 한 번, 그리고 data가 변할 때마다 실행된다. 따라서 특정 변수의 값이 변했을 때만 실행시키고 싶은 경우 위와 같이 사용한다.

 

---

 

세 번째 사용법으로 문제를 해결했다. useState와 useEffect를 자주 쓰는 만큼 헷갈리지 않게 계속 복습해야겠다.