[React] useEffect 훅과 의존성 배열

안녕하세요! 웹 파트 YB 김태욱입니다.

 

이번 3주차 세미나를 통해 배운 useEffect훅에 대해 더 공부해보고 아티클을 작성하게 되었습니다.

 

1.useEffect란?

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

 

1-1. 언제, 어떻게 사용할까?

when

- 어떤 컴포넌트가 화면에 보여졌을 때 무언가를 실행하고 싶을 때

- 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶을 때 

 

How

- useState와 마찬가지로 React에서 제공하는 훅이므로, import React,{useEffect} from "react";로 import 해서 사용한다.

 

1-2. useEffect 사용 예시

//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가 실행된다.

- useEffect의 핵심 기능은 컴포넌트가 렌더링 될 때 실행된다는 것이다.

 

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

- 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과 연결시켰다.

위 코드는 다음과 같이 동작한다.

1. 사용자가 input에 갑을 입력

2. value, 즉 state가 변경된다

3. state가 변경됐기 때문에 App 컴포넌트가 리렌더링 된다.

4. 리렌더링 되었기 때문에 useEffect가 다시 실행된다.

5. 1번~5번 과정이 계속 반복된다.

 

=> 콘솔이 브라우저에 한 번만 찍히는 것을 원했지만 input을 입력할 때마다 계속 찍히게 된다.

 

이런 useEffect의 특성은 의존성 배열을 통해 해결할 수 있다.

 

2. 의존성 배열 (dependency array)

 

2-1. 의존성 배열이란 ?

쉽게 얘기하면 “이 배열에 값을 넣으면 그 값이 바뀔 때만 useEffect를 실행함” 이라는 것이다.

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

 

2-2. 의존성 배열 예시

- 입력시 콘솔이 계속 찍히던 코드의 useEffect에 의존성 배열 추가

// 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를 사용하는데, 어떤 함수를 컴포넌트가 렌더링 될 때 한번만 실행하고 싶으면 의존성 배열을 [ ] 빈 상태로 넣으면 된다.