[React.js] Hooks - useEffect

카테고리 : Development
태그: react · useEffect · hooks · Callback function · Cleanup function · Dependency Array
등록일: 2022년 09월 03일
최근 업데이트: 2023년 03월 29일

---

useEffect

Hooks API Reference – React

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를 단순한 업데이트 용도로 사용해온 나로서는, 정말 고려해야 할 부분이 많다