[리액트] useEffect란? 그리고 의존성배열

useEffect란?

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

 

코드로 보기

렌더링될 때 useEffect 안에 있는 console.log가 실행된다. 이게 useEffect 핵심 기능

import React, { useEffect } from "react";

const App = () => {

  useEffect(() => {
    console.log("hello useEffect");
  });

  return <div>Home</div>;
}

export default App;

 

 

 

useEffect와 리렌더링(re-rendering)

 useEffect가 속한 컴포넌트가 화면에 렌더링 될 때 실행되기에 의도치 않은 동작을 경험할 수도 있다.
아래 코드를 보면 input 에 타이핑 될 때마다 리렌더링이 되고 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의 의존성배열에 아무것도 넣지 않으면  처음에 딱 한번만 실행되고 그 이후로는 어떤일이 일어나지 않는다.

useEffect(()=>{
	// 실행하고 싶은 함수
}, [])