의존성 배열 안 쓸거면 useEffect 쓰지마!!!!!!!!

01. useEffect

(1) useEffect는 언제 사용하나

💡 useEffect란? 리액트 컴포넌트가 렌더링 된 이후마다 특정 작업을 수행하도록 설정할 수 있는 Hook 이다.
컴포넌트가 렌더링 된 이후 실행된다. 이게 바로 useEffect 핵심 기능.

어떤 컴포넌트가 화면에 보여졌을 때 내가 무언가를 실행하고 싶다면?
또는 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶다면?
📢 useEffect를 사용

useState와 마찬가지로 React에서 제공하는 훅 (기능) 이므로 import 해서 사용

import React, { useEffect } from "react";

(2) 코드로 보는 useEffect 기초

브라우저에서 우리가 App 컴포넌트를 눈으로 보는 순간, 즉 App 컴포넌트가 화면에 렌더링 된 이후 useEffect 안에 있는 console.log가 실행된다.

// src/App.js

import React, { useEffect } from "react";

const App = () => {

  useEffect(() => {
		// 이 부분이 실행된다.
    console.log("hello useEffect");
  });

  return <div>Home</div>;
}

export default App;

(3) useEffect와 리랜더링

useEffect가 속한 컴포넌트가 화면에 랜더링 된 이후 실행되는 특징 때문에 의도치않은 동작을 경험할 수 있다.

import React, { useEffect, useState } from "react";

const App = () => {
  const [value, setValue] = useState("");

  useEffect(() => {
    console.log("HELLLO");
  });

  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(event) => {
          setValue(event.target.value);
		      console.log("value => ", value);
        }}
      />
    </div>
  );
}

export default App;

input에 값을 입력할 때 마다 콘솔창에 텍스트가 계속 생성된다.

1. input에 값을 입력한다.
2. value, 즉 state가 변경된다. (setValue(event.target.value)로 인해)
3. state가 변경되었기 때문에, App 컴포넌트가 리렌더링 된다.
4. 리렌더링이 되었기 때문에 useEffect가 다시 실행된다.
5. 1번 → 5번 과정이 계속 순환환다.

😵 너무 당황스럽다. 하지만? 해결할 수 있다.

02. 의존성 배열 (dependency array)

📢 반드시 알아야 하는 useEffect hook의 동작 trigger, 의존성 배열

(1) 의존성 배열 이란

?? : “이 배열에 값을 넣으면 그 값이 바뀔 때만 useEffect를 실행할게”

// useEffect의 두번째 인자가 의존성 배열이 들어가는 곳 입니다.
useEffect(()=>{
	// 실행하고 싶은 함수
}, [의존성배열])

(2) 코드로 보는 의존성 배열 -> 빈 배열인 경우

useEffect는 최초 렌더링 이후 딱 한번만 실행되고 그 이후로 실행되지 않는다!

당연함. 배열 속 값이 바뀌어야 useEffect를 실행한다고 했는데 빈값이라 바뀔일이 없음.

(3) 코드로 보는 의존성 배열 -> 값이 있는 경우

useEffect도 계속 실행이 되겠죠

배열에 value를 넣어보겠삼

// src/App.js

import React, { useEffect, useState } from "react";

const App = () => {
  const [value, setValue] = useState("");
  useEffect(() => {
    console.log("HELLLO");
  }, [value]); // value를 넣음

  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(event) => {
          setValue(event.target.value);
        }}
      />
    </div>
  );
}

export default App;

03. clean up

(1) 클린 업 이란?

컴포넌트가 사라졌을 때 (unmount) 무언가를 어떻게 실행하는지 => 클린 업(clean up)
useEffect와 반대되는 개념?! 🙂

(2) 클린 업 방법

useEffect 안에서 return을 주고 여기에 실행 함수를 넣음

// src/App.js

import React, { useEffect } from "react";

const App = () => {

	useEffect(()=>{
		// 화면에 컴포넌트가 나타났을(mount) 때 실행하고자 하는 함수를 넣어주세요.

		return ()=>{
			// 화면에서 컴포넌트가 사라졌을(unmount) 때 실행하고자 하는 함수를 넣어주세요.
		}
	}, [])

	return <div>hello react!</div>
};

export default App;

(3) 클린 업 활용

속세를 벗어나는 버튼 을 만들었고 버튼을 누르면 useNavigate에 의해서 /todos로 이동하면서 속세 컴포넌트를 떠날 것이다.
그러면서 화면에서 속세 컴포넌트가 사라질 것이고, useEffect의 return 부분이 실행될 것.

// src/SokSae.js

import React, { useEffect } from "react";
import { useNavigate } from "react-router-dom";

const 속세 = () => {
  const nav = useNavigate();

  useEffect(() => {
    /// 클린업 함수!
    return () => {
      console.log(
        "안녕히 계세요 여러분! 전 이 세상의 모든 굴레와 속박을 벗어 던지고 제 행복을 찾아 떠납니다! 여러분도 행복하세요~~!"
      );
    };
  }, []);

  return (
    <button
      onClick={() => {
        nav("/todos");
      }}
    >
      속세를 벗어나는 버튼
    </button>
  );
};

export default 속세;

(4) 컴포넌트 라이프사이클

리액트 컴포넌트도 태어나고, 살아가고, 죽는 생애주기가 존재한다.

클래스형 컴포넌트를 주로 사용했을 이전 버전에서는 이 생애주기와 관련된 여러 메서드가 존재했지만,
현재처럼 함수형 컴포넌트를 사용할 때는 useEffect를 주로 사용하여 핸들링한다.

출처 : Dev Community