useEffect

리액트하면 훅중에 useEffect가 이해가 좀 안갔는데 이제 이해가 간다.

• useEffect는 언제 사용할까? useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook입니다. 쉽게 말해 어떤 컴포넌트가 화면에 보여졌을 때 내가 무언가를 실행하고 싶다면? 또는 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶다면? useEffect를 사용합니다.
  

브라우저에서 우리가 App 컴포넌트를 눈으로 보는 순간, 즉 App 컴포넌트가 화면에 렌더링될 때 useEffect 안에 있는 console.log가 실행됩니다. 컴포넌트가 렌더링 될 때 실행된다. 이게 바로 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가 계속 실행되는 것을 볼 수 있습니다.

• 의존성 배열(dependency array) 이란? useEffect에는 의존성 배열이라는 것이 있습니다. 말이 조금 어렵죠? 쉽게 풀어 얘기하면 “이 배열에 값을 넣으면 그 값이 바뀔 때만 useEffect를 실행할게” 라는 것 입니다.

일단 의존성 배열안에는 어떠한 값도 넣지 않았습니다. 의존성 배열이 “이 배열에 값을 넣으면 그 값이 바뀔 때만 useEffect를 실행할게” 라는 의미를 가진다고 했고 우리가 아무것도 넣지 않았으니 useEffect는 처음에 딱 한번만 실행되고 그 이후로는 어떤일이 일어나도 실행이 되서는 안됩니다.

• 클린 업 이란? 우리가 처음에 “어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶다면”이라는 소로 시작을 했습니다. 컴포넌트가 나타났을 때 (렌더링됐을 때 === 함수 컴포넌트가 실행됐을 때) useEffect의 effect 함수가 실행되는 것은 우리가 배웠으니, 이제 컴포넌트가 사라졌을 때 무언가를 어떻게 실행하는지 배워봅시다. 이 과정을 우리는 클린 업 (clean up) 이라고 표현합니다.
  

클린 업을 하는 방법은 간단합니다. useEffect 안에서 return 을 해주고 이 부분에 실행되길 원하는 함수를 넣으면 됩니다.