🔫 React_05 useEffect

🎮 useEffect

컴포넌트가 마운트 됐을 때(처음 나타났을 때), 언마운트 됐을 때(사라질 때), 그리고 업데이트 될 때(특정 props가 바뀔 때) 특정 작업을 처리하는 방법에 대해 알아보기

🎲 마운트 / 언마운트

// UserList.js
import React, { useEffect } from "react";

function User({ user, onRemove, onToggle }) {
  useEffect(() => {
    // 마운트 : 처음 나타났을 때
    console.log("컴포넌트가 화면에 나타남");

    return () => {
      // 언마운트 : 사라질 때
      console.log("컴포넌트가 화면에서 사라짐");
    };
  }, []);

  ...
}

useEffect(함수, 의존값이 들어있는 배열(deps))

• 첫 번째 파라미터 : 함수
• 두 번째 파라미터 : 의존값이 들어있는 배열(deps)
  • deps 배열이 비어있다면, 컴포넌트가 처음 나타날 때에만 useEffect에 등록한 함수가 호출

cleanup 함수

• useEffect 안에서 return할 때 실행
• useEffect에 대한 뒷정리를 해준다.
• deps가 비어있는 경우, 컴포넌트가 사라질 때 cleanup 함수 호출

deps 배열이 비어있는 상태

• 컴포넌트 3개가 나타나 있으므로 "컴포넌트가 화면에 나타남"이 콘솔에 3번 찍힌다.
• 컴포넌트가 나타날 때 "컴포넌트가 화면에 나타남"이 콘솔에 찍힌다.
• 컴포넌트가 사라질 때 cleanup 함수 호출되어 "컴포넌트가 화면에서 사라짐"이 콘솔에 찍힌다.

마운트 시 하는 작업들

• props로 받은 값을 컴포넌트의 로컬 상태로 설정
• 외부 API 요청(REST API 등)
• 라이브러리 사용 (D3, Video.js 등)
• setInterval을 통한 반복작업 또는 setTimeout을 통한 작업 예약

언마운트 시 하는 작업들

• setInterval, setTimeout을 사용하여 등록한 작업을 clear (clearInterval, clearTimeout)
• 라이브러리 인스턴스 제거

🎲 deps에 특정 값 넣기

• deps에 특정 값을 넣으면 컴포넌트가 처음 마운트 될 때, 특정 값이 바뀔 때 호출된다.
• 언마운트 될 때, 값이 바뀌기 직전에도 호출된다.

// UserList.js
import React, { useEffect } from "react";

function User({ user, onRemove, onToggle }) {
  useEffect(() => {
    console.log('user 값이 설정됨');
    console.log(user);
    return () => {
      console.log('user가 바뀌기 전..');
      console.log(user);
    };
  }, [user]);

  ...
}

• useEffect 안에서 사용하는 상태나 props가 있다면, useEffect의 deps에 넣어줘야 한다.
  ⇒ useEffect 규칙
• 사용하는 상태나 props를 deps에 넣지 않는다면, useEffect에 등록한 함수가 실행될 때 최신 상태/props를 가르키지 않는다.

🎲 deps 파라미터 생략하기

• deps를 생략한다면, 컴포넌트가 리렌더링 될 때마다 호출

// UserList.js
import React, { useEffect } from "react";

function User({ user, onRemove, onToggle }) {
  useEffect(() => {
    console.log(user);
  });

  ...
}

• 리액트 컴포넌트는 기본적으로 부모 컴포넌트가 리렌더링 되면 자식 컴포넌트도 리렌더링이 된다.
• 실제 DOM에 변화가 반영되는 것은 바뀐 내용이 있는 컴포넌트에만 해당하지만 Virtual DOM에는 모든 걸 다 렌더링하고 있다는 것
  ⇒ 최적화가 필요