[TIL] React Hooks - useEffect

React Hook에 관하여 하나씩 정리를 해보려 한다..

React Hook의 종류도 다양하고 약간의 헷깔리는 부분도 있고 머릿속에서 한번 더 정리 해봐야 그나마.. 100%에서 30%는 머리에 남아 있을거니까!!

useEffect

useEffect는 언제 사용할까?

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

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

useState와 마찬가지로 React에서 제공하는 훅 (기능) 이므로, import React, { useEffect } from "react"; 로 import 해서 사용합니다.

useEffect 기초

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 핵심 기능)

useEffect와 리렌더링(re-rendering)

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의 특징에 의해 우리가 의도치않은 동작을 경험할수 있습니다.

input이 있고 value 라는 state를 생성하여 input과 연결시켰습니다.
이렇게 구현하고 브라우저에 input에 어떤 값을 입력하면 useEffect가 계속 실행되는 것을 볼 수 있습니다.

console.log("hello useEffect"); 가 계속 실행되서 브라우저 콘솔에 텍스트가 계속 올라오는 것을 볼 수 있습니다.

왜 input에 값을 입력한 것 뿐인데, useEffect가 계속 실행되는 것일까요?

1. input에 값을 입력
2. value, 즉 state가 변경
3. state가 바뀌었기 때문에 -> App컴포넌트가 리레더링
4. 리렌더링 -> useEffect()
5. 1~4번 계속 반복

콘솔이 브라우저에 한번만 찍히길 원했지만, input을 입력할 때마다 계속 찍히고 있는 것 입니다. 하지만 이런 부분도 해결할 수 있습니다.

의존성 배열

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

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

useEffect에 의존성 배열만 추가했습니다.

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

clean up