useEffect

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

 

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

코드로 보는 useEffect 기초

// src/App.js

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)다음 코드를 볼까요? input이 있고 value 라는 state를 생성하여 input과 연결시켰습니다. 이렇게 구현하고 브라우저에 input에 어떤 값을 입력하면 useEffect가 계속 실행되는 것을 볼 수 있습니다.영상을 보면, console.log("hello useEffect"); 가 계속 실행되서 브라우저 콘솔에 텍스트가 계속 올라오는 것을 볼 수 있습니다. 왜 input에 값을 입력한 것 뿐인데, useEffect가 계속 실행되는 것일까요?전체 흐름은 아래와 같습니다.

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

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

 

 

 출처 - 스파르타코딩클럽(항해99과정):https://hanghae99.spartacodingclub.kr/