TIL) useEffect

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

다시말해 화면에 컴포넌트가 mount 또는 unmount되었을 때 실행하고자 하는 함수를 제어하게 해주는 훅이다.

import React, { useEffect } from "react"로 import해서 사용한다.

 

useEffect와 리렌더링

import React, { useEffect, useState} from "react";

const App = () => {
const [value, setValue] = useState("");
 
  useEffect(()=> {
    console.log("hello useEffect")
  })
  
  return (
    <>
    <input
    type="text"
    value={value}
    onChange={(event)=>{
      setValue(event.target.value);
    }}/>
    </>
  );
}
export default App;

이렇게 구현하고 브라우저에 input에 어떤 값을 입력하면 useEffect가 계속 실행되는 것을 볼 수 있다.

흐름은 아래와 같다.

 

1. input에 값을 입력한다

2. value, 즉 state가 변경된다.

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

4. 리렌더링이 되어서 useEffect가 다시 실행된다.

5. 1 -> 5번 과정이 계속 순환한다.

 

useEffect의 의존성배열

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

이 의존성 배열에 값을 넣으면 그 값이 바뀔 때만 useEffect를 실행하도록 함.

 

의존성 배열이 빈 배열인 경우

import React, { useEffect, useState} from "react";

const App = () => {
const [value, setValue] = useState("");
 
  useEffect(()=> {
    console.log("hello useEffect")
  },[]);
  
  return (
    <>
    <input
    type="text"
    value={value}
    onChange={(event)=>{
      setValue(event.target.value);
    }}/>
    </>
  );
}
export default App;

같은 코드의 useEffect 의존성 배열 []을 빈값으로 넣어주었다. 이 코드를 실행시키면 처음 실행된 useEffect이외에 더 이상 실행이 되진 않는다. 이렇게 렌더링 될 때 한 번만 useEffect를 실행시키고 싶을때는 빈값을 넣어주면 된다.

의존성 배열에 값이 있으면?

같은 코드의 의존성 배열에 value를 넣어보면, value는 state이고 우리가 input을 입력할 때마다 그 값이 변하게되니 useEffect도 계속 실행되게 됨.

import React, { useEffect, useState} from "react";

const App = () => {
const [value, setValue] = useState("");
 
  useEffect(()=> {
    console.log("hello useEffect")
  },[value]);
  
  return (
    <>
    <input
    type="text"
    value={value}
    onChange={(event)=>{
      setValue(event.target.value);
    }}/>
    </>
  );
}
export default App;