React - useEffect

useEffect

useEffect는 리액트 컴포넌트가 랜더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. 즉, 어떤 컴포넌트가 화면에 보여질 때, 혹은 사라질 때 무언가를 실행하고 싶으면 useEffect를 사용하게 된다.

ex)콘솔이 한번만 찍히는 사례

// src/App.js

import React, { useEffect } from "react";

const App = () => {

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

  return <div>Home</div>;
}

export default App;

ex)input태그의 value가 바뀔 때마다 콘솔이 찍히는 사례

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;

이것의 이유는 다음과 같다.

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

의존성 배열(dependency array)

useEffect는 기본적으로 화면이 랜더링 될 때만, 그리고 될 때마다 실행되는 것이 원칙인데 그것을 제어하기 위한 한 수단이다. 의존성 배열은 useEffect의 두번째 인자로, 첫번째 인자인 콜백함수에 이어서 선언되는데 이 배열에 속한 변수의 state가 변할 때만 useEffect를 실행하겠다는 의미가 된다.
선언은 다음과 같이 한다.

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

그렇다면, 예외적으로 의존성 배열에 어떤 값도 넣지 않은 상태로 useEffect가 선언이 된다면?

useEffect의 실행의 인자로 어떤 것도 두지 않겠다는 말이 되므로, 최초에 단 한번만 실행되고 그 이후로는 브라우저에서 어떤 일이 일어나도 실행시키지 않겠다는 의미가 된다.