useEffect()

최종 수정 : 2024-06-17

useEffect()

컴포넌트 생명 주기와 관련이 있는 리액트 훅이다.

 

리액트는 데이터를 UI로 변환한다. 각 컴포넌트는 자신의 역할을 하면서 전체 사용자 인터페이스에 기여한다. 리액트는 엘리먼트 트리를 구성하고, 이미 렌더링된 내용과 비교한 후 필요한 변경사항을 DOM에 적용한다. 상태가 변경되면 리액트는 UI를 갱신하기 위해 다시 이 과정을 진행한다.

 

useEffect 훅은 비동기(asynchronous)로 실행한다. 즉, 콜백 함수의 종료를 기다리지 않는다. 공식 문서는 될 수 있으면 useEffect 훅을 사용하고 useEffect 훅으로 구현이 안 될 때만 useLayoutEffect 훅을 사용하라고 권한다.

 

# 부수 효과(side effect)

하지만 때로는 컴포넌트가 이 데이터 흐름 밖으로 벗어나 다른 API와 직접 상호작용해야 할 때가 있다. 어떤 방식으로든 외부 세계에 영향을 미치는 동작을 부수 효과(side effect)라고 한다. 리액트는 useEffect 훅을 통해 부수 효과를 더 잘 제어하고 컴포넌트 생명 주기와 부수 효과를 더 잘 통합할 수 있게 한다. useEffect()는 우리가 외부 세계와 안전하게 상호작용하는 관문이다.

 

# 생명주기

리액트에서는 컴포넌트를 생성하고 렌더링하다가 어떤 시점이 되면 소멸한다. 이러한 과정을 컴포넌트의 생명주기(lifecycle)라고 표현한다.

https://young-taek.tistory.com/250

컴포넌트의 생명주기(lifecycle)

 

# useEffect 훅의 다양한 용례

호출 패턴	코드 패턴	실행 패턴
두 번째 인자가 없다	useEffect(() => {   // 부수 효과를 수행 });	매번 렌더링이 끝난 다음에 실행됨
빈 배열을 두 번째 인자로 지정	useEffect(() => {   // 부수 효과를 수행 }, []);	컴포넌트가 마운트될 때 단 한 번만 실행됨
두 번째 인자로 의존 관계 배열을 지정함	useEffect(() => {   // dep1과 dep2를 사용하는   // 부수 효과를 수행 }, [dep1, dep[2]);	의존 관계 배열에 있는 값이 변할 때만 실행됨
함수를 반환함	useEffect(() => {   // 부수 효과를 수행   return () => {/* 정리 */}; }, [dep1, dep2]);	컴포넌트가 언마운트되거나 효과를 다시 실행하기 전에 리액트가 정리 함수를 호출해

 

---

참고 자료

리액트 모던 웹 개발 with 타입스크립트 (p.314-321)

리액트 훅 인 액션 (p.129-130, 141)