useEffect Hook

G-NOTE·2021년 6월 1일
0

React

목록 보기
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]);

useEffect에 의존성 배열이 있는 경우 로그

  • user의 값이 설정되거나 변경될 때마다 useEffect의 함수 호출
  • useEffect 함수는 특정 값이 업데이트된 직후에 실행된다.
  • 이름을 클릭했을 때
    console
  • user에 변화가 생겼으므로 함수 호출
    - 값이 바뀌기 직전 cleanup 함수 실행
    • 이후 바뀐 값 표시

주의사항

useEffect에서 props로 받아온 값을 참조하거나 useState에서 관리하는 값을 참조할 경우 최신 상태를 유지하기 위해 deps 배열을 넣어야 한다.

profile
FE Developer

0개의 댓글