[React] React Hooks (useEffect), clean up

[useEffect]

useEffect 는 react 컴포넌트가 렌더링이 될 때마다, 특정 작업을 수행할 수 있게 하는 Hook.

 

다음 식을 실행시키면,

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>
  );
};

 

인풋에 값을 입력할 때마다 useEffect 가 실행되는 것을 볼 수 있으며, 초반에 hello useEffect 가 두번 실행되는 것은, strictmode 때문.

index.js 에 있는 다음 StrictMode 를 제거하면, 하나만 출력 됨.

  <React.StrictMode>
    <App />
  </React.StrictMode>

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

위의 순서대로 인풋 값을 입력할 때마다, useEffect 가 무한 렌더링 된다.

 

---

 

[의존성 배열]

위의 useEffect 를 제어할 수 있는 방식으로 의존성 배열이 있다.

[의존성배열] 이 안의 값이 바뀔 때만 useEffect를 사용한다 라고 해석한다.

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

 

1. 의존성배열이 빈 배열 [] 인 경우

컴포넌트를 실행할 때 딱 한번만 렌더링 하고 싶은경우 의존성 배열을 빈 배열 [] 로 작성하면 된다.

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

 

2. 의존성배열에 값이 있는 경우

[value] 값이 변하기 때문에 인풋에 값을 입력할 때마다 리렌더링이 계속 됨. 

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

---

[clean up]

컴포넌트가 화면에서 없어질 때 동작을 하도록 하는 것.

  useEffect(() => {
    console.log("hello useEffect");
    
    // clean up : 컴포넌트가 사라질 때 동작을 한다.
    return () => {
      console.log('나 사라져요')
    }
  });