Hooks - useEffect
Hooks - useEffect
useEffect
useEffect는 React Hooks API의 일종으로, 컴포넌트가 렌더링 될 때마다 특정 작업을 실행하기 위한 Hook이다.
1. 백엔드 서버에서 변경된 REST API 데이터를 패치
2. props, state 등 상태값의 변동을 확인하기 위함
3. Timers(setTimeout, setInterval) 을 운용하기 위함
기본 문법
useEffect(callback function, [dependency array])
1) Callback function
useEffect의 첫 번째 인자이자 effect 함수라고도 칭한다. 매 렌더링 시 수행하고자 하는 작업을 콜백함수 형태로 인자로 전달한다.
2) Dependency Array
useEffect의 두 번째 인자이다. deps는 필수요소가 아니므로 생략해도 되나, 이 deps의 모습에 따라 useEffect의 성질이 달라진다.
- undefined : 모든 렌더링, 리렌더링 시 effect 함수 실행
- [ ] (빈 배열) : 최초(마운트)에만 effect 함수 실행
- [variable] : deps 배열 내 값들이 바뀌는 경우에도 effect 함수 실행. 통상 effect 함수와 관련된 값이나 상태(props, state) 해당.
3) Cleanup function
effect 함수가 반환(return)하는 함수를 cleanup 함수라고 한다. 이 함수는, deps가 비었다면 언마운트 시, 값이 있다면 해당 값의 업데이트 직전에 실행된다.
그렇기에, 이벤트 리스너 삭제나 클로저 해제 등의 역할을 주로 담당하기 때문에 Clean-up 이라고 칭해지곤 한다.
회고
렌더링 최적화 등 고려해야 될 조건이나 작동원리를 제대로 모르고 썼다고 느꼈다.
useEffect를 단순한 업데이트 용도로 사용해온 나로서는, 정말 고려해야 할 부분이 많다