useEffect Hook

G-NOTE·2021년 6월 1일

목록 보기

5/27

useEffect(() => {
	// func
  	return () => {
    	// cleanup func
    }
}, [deps]);

리액트 컴포넌트가 화면에 처음 나타날 때, 사라질 때 특정 작업 가능
컴포넌트의 어떤 상태가 바뀌어서 업데이트 될 때 작업 가능, 리렌더링 될 때마다 작업도 가능

주요 개념

deps : 의존성 배열 (의존되는 값이 배열에 들어감)
- 비어있는 경우 컴포넌트가 처음 나타날 때에만 실행된다.
cleanup 함수 : useEffect의 return 함수. 컴포넌트가 바뀌기 전, 제거되기 전에 호출된다.
컴포넌트가 마운트될 때 일반적으로 추가하는 작업
- props로 받은 값을 컴포넌트의 state로 설정
- REST API 등 외부 API 처리
- 라이브러리를 사용할 때
- setInterval, setTimeout 등 비동기함수 처리
useEffect의 함수 호출 시점은 UI가 화면에 나타난 이후이기 때문에 DOM에 바로 접근해도 괜찮다.
컴포넌트가 언마운트될 때 일반적으로 추가하는 작업
- clearInterval, clearTimeout 등
- 라이브러리 인스턴스 제거

deps가 없는 경우

import { useEffect } from "react";

function User({ user, onRemove, onToggle }) {
  const { username, age, id, active } = user;
  useEffect(() => {
    console.log("컴포넌트가 화면에 나타납니다.");
    return () => {
    	console.log("컴포넌트가 화면에서 사라집니다.");
    };
  }, []);

useEffect에 의존성 배열을 주지 않았을 경우 로그

컴포넌트가 세 개 나타나기 때문에 세번 호출된 것
컴포넌트가 새로 만들어지면 호출되지만 이미 만들어진 컴포넌트가 업데이트 될 때에는 호출되지 않는다.

deps가 있는 경우

function User({ user, onRemove, onToggle }) {
  const { username, age, id, active } = user;
  useEffect(() => {
    console.log("user값이 설정되었습니다.");
    console.log(user);
    return () => {
      console.log("user값이 바뀌기 전");
      console.log(user);
    };
  }, [user]);