React Hooks(useEffect)

1. useEffect

(1) useEffect는 언제 사용할까?

• useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다.
• 쉽게 말해 어떤 컴포넌트가 화면에 보여졌을 때 내가 무언가를 실행하고 싶거나
  어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶다면 useEffect를 사용한다.
• useState와 마찬가지로 React에서 제공하는 훅 (기능) 이므로,
  import React, { useEffect } from "react"; 로 import 해서 사용한다.

(2) 코드로 보는 useEffect 기초

// src/App.js

import React, { useEffect } from "react";

const App = () => {
  useEffect(() => {
		// 이 부분이 실행된다.
    console.log("hello useEffect");
  });
  return <div>Home</div>;
}

export default App;

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

(3) useEffect와 리렌더링(re-rendering)

• useEffect는 useEffect가 속한 컴포넌트가 화면에 렌더링 될 때 실행된다.
• 이런 useEffect의 특징에 의해 우리가 의도치않은 동작을 경험할 수도 있다.

예시

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

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

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

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

export default App;

input이 있고 value 라는 state를 생성하여 input과 연결시켰다.

이렇게 구현하고 브라우저에 input에 어떤 값을 입력하면 useEffect가 계속 실행되는 것을 볼 수 있다.

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

그래서 콘솔이 브라우저에 한번만 찍히길 원했지만, input을 입력할 때마다 계속 찍히고 있는 것이다.

하지만 이런 부분도 해결할 수 있다.

 

2. 의존성 배열

(1) 의존성 배열(dependency array) 이란?

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

• useEffect에는 의존성 배열이라는 것이 있다.
  쉽게 풀어 얘기하면 “이 배열에 값을 넣으면 그 값이 바뀔 때만 useEffect를 실행할게” 라는 것이다.

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

• 위에 보았던 코드에 useEffect에 의존성 배열만 추가

// src/App.js

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

const App = () => {
  const [value, setValue] = useState("");
  useEffect(() => {
    console.log("hello useEffect");
  }, []); // 비어있는 의존성 배열

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

export default App;

• 일단 의존성 배열안에는 어떠한 값도 넣지 않았다.
  의존성 배열이 “이 배열에 값을 넣으면 그 값이 바뀔 때만 useEffect를 실행할게” 라는 의미를 가진다고 했고,
  배열에 아무것도 넣지 않았으니 useEffect는 처음에 딱 한번만 실행되고 그 이후로는 어떤일이 일어나도 실행이 되서는 안된다.
• useEffect를 사용하는데, 어떤 함수를 컴포넌트가 렌더링 될 때 단 한번만 실행하고 싶으면 의존성 배열을 [ ] 빈 상태로 넣으면 된다.

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

// src/App.js

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

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

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

export default App;

• 빈 배열을 넣었을 때, 최초 렌더링 이후에는 useEffect가 실행되지 않는다.
• 의존성 배열에 value 를 넣어보면,
  value는 state이고, input을 입력할 때마다 그 값이 변하게 되니 useEffect도 계속 실행이 된다.

(+ 콘솔이 2번 찍히는 것은 useEffect로 인해 두번 실행된 것이 아니라, strict mode 라는 개발 환경이라서 그렇게 보이는 것 이다.)

 

3. clean up

(1) 클린 업 이란?

• 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하는 과정을 클린 업 (clean up) 이라고 표현한다.

useEffect(() => {
    (이펙트 함수)
    return {
        (클린업 함수)
    };
}, [의존값]);

(2) 클린 업 하는 방법

• 마운트(mount): 마운트는 컴포넌트가 최초로 렌더 될 때 거치는 과정이다. 이후 props와 state가 변경될 때는 마운트 과정을 거치지 않는다.
• 언마운트(unmount): 언마운트는 컴포넌트가 삭제될 때 거치는 과정이다.

// src/App.js

import React, { useEffect } from "react";

const App = () => {
	useEffect(()=>{
		// 화면에 컴포넌트가 나타났을(mount) 때 실행하고자 하는 함수를 넣어주세요.
		return ()=>{
			// 화면에서 컴포넌트가 사라졌을(unmount) 때 실행하고자 하는 함수를 넣어주세요.
		}
	}, [])
	return <div>hello react!</div>
};

export default App;

• useEffect 안에서 return 을 해주고 이 부분에 실행되길 원하는 함수를 넣으면 된다.

(3) 클린 업 활용해보기

// 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 속세;

• 속세를 벗어나는 버튼을 만들었고, 버튼을 누르면 useNavigate에 의해서 /todos로 이동하며 속세 컴포넌트를 떠난다.
• 그러면서 화면에서 속세 컴포넌트가 사라지고, useEffect의 return 부분이 실행된다.
• /에서 /todos 로 잘 이동했고, 그 과정에서 clean up이 실행되었다. 

 

4. 정리

• useEffect는 화면에 컴포넌트가 mount 또는 unmount 됐을 때 실행하고자 하는 함수를 제어하게 해주는 훅이다.
• 의존성 배열을 통해 함수의 실행 조건을 제어할 수 있다.
• useEffect 에서 함수를 1번만 실행시키고자 할때는 의존성 배열을 빈 배열로 둔다.

 

---

<출처>

https://jongminfire.dev/react-use-effect-%ED%9B%85-%EC%9D%B4%ED%8E%99%ED%8A%B8-%ED%95%A8%EC%88%98-%ED%81%B4%EB%A6%B0%EC%97%85-%ED%95%A8%EC%88%98