리액트 Hook - useEffect

이한결·2023년 2월 9일

useEffect 스파르타코딩 여정 32일차 항해99

부트 캠프

목록 보기

45/98

2월 9일 여정 32일차이다.

리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook입니다.

리액트의 Hook들은 너무 많다. 그중에 오늘은 useEffect에 대해 알아볼까 한다.

오늘의 Today I Learned

useEffect

어떤 특정 컴포넌트가 화면에 보여졌을 때 무엇인가 실행할 수 있도록 하는 Hook이 바로 useEffect이다.

// src/App.js

import React, { useEffect } from "react";

const App = () => {

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

  return <div>Home</div>;
}

export default App;

App 컴포넌트가 랜더링 될 때, useEffect가 실행되면서 console.log가 출력이 된다. 여기서 중요한 것은 컴포넌트가 랜더링 될 때 실행된다는 것이다.

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에 입력을 하여 onChange()를 실행하면 화면이 랜더링 되면서 useEffect도 같이 실행이 된다. 왜 input에 입력한 건데 useEffect가 실행되는 걸까?

useEffect 실행 순서

input에 값을 입력
value, 즉 state가 변경
state가 변경되었기 때문에, App 컴포넌트 리렌더링
리랜더링 되면 useEffect가 다시 실행.
계속 반복.

위 과정 덕분에 useEffect가 계속 실행되는 것이다.

그럼 한번만 실행시키고 싶다면 어떻게 할까?

방법은 단순하다. 의존성 배열을 추가하면 된다.
밑에 사용법을 보자.

// useEffect의 두번째 인자가 의존성 배열이 들어가는 곳 입니다.
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;

자 이제 input에 값을 입력해도 console이 한번밖에 출력되지 않는 것을 볼 수 있다.

의존성 배열에 state의 값인 value를 넣으면 어떻게 될까?

답은 value가 바뀔때마다 실행이 된다.

어떤 컴포넌트가 화면에서 사라졌을 때 무엇인가를 실행하고 싶다면 어떻게 해야 될까?

바로 '클린 업'이라는 것을 하면 된다.

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

nav라는 것을 통해서 버튼을 클릭하면 '/todos' 페이지로 이동하게 된다. 이동하면서 '속세'라는 컴포넌트가 사라지고, 클린업이 실행된다. 즉 return 부분이 실행된다.