[React] useEffect 함수

useEffect

- 매번 컴포넌트가 렌더링 될 때 특정 조건에 의존하여 수행되며, 컴포넌트가 최대한 순수 함수를 유지할 수 있도록 도와주는 함수

- 컴포넌트가 마운트될 때와 지정된 의존성이 변경될 때 실행

 

 

Hook(훅)이란

함수형 컴포넌트에서 상태(state)와 다른 React 기능을 사용할 수 있게 해주는 특별한 함수

주요 훅으로는 useState, useEffect, useContext 가 있음

 

useState - 컴포넌트에 상태를 추가할 수 있음

useEffect - 컴포넌트의 생명 주기동안 부수효과(side effects)를 수행할 수 있음. (ex. 데이터 가져오기, 이벤트 리스너 등록 등)

useContext - Context API를 사용하여 전역적인 상태를 관리할 수 있음

 

 

 

Mount(마운트)란

React 컴포넌트의 생명주기(lifecycle) 중 하나의 단계로, 컴포넌트가 DOM에 처음 추가되는 시점을 말함

컴포넌트의 라이프사이클 단계

1. mount - 컴포넌트가 생성되고 DOM에 추가됨. 주로 초기화 작업을 수행

2. update - 컴포넌트가 재렌더링되는 단계. 상태나 props의 변화에 따라 컴포넌트 재렌더링

3. unmout - 컴포넌트가 DOM에서 제거되는 단계. 클린업 작업을 수행

 

 

 

useEffect는 이벤드 핸들러에 속하는 개념,

대부분의 이벤트 핸들러와 다르게 사용자와의 상호작용으로 실행되는 함수가 아닌

랜더링 이후에 실행되고, 특정 조건을 만족하면 실행된다는 차이

 

예시)

import { useState, useEffect } from "react";

export default function App() {
  const [count, setCounter] = useState(0);

  useEffect(() => {
    console.log(`useEffect 실행`);
  });

  const countHandler = (e) => {
    setCounter((s) => s + 1);
  };

  return (
    <div className="App">
      <h1>{count}</h1>
      <button onClick={countHandler}>숫자 증가</button>
    </div>
  );
}

 

위와 같이 작성하면 카운터 증가를 누를때마다 값이 1씩 증가하며 바로 재랜더링되며 콘솔창에 'useEffect 실행' 찍힘

또한 useEffect 함수는 두 개의 매개변수를 받는데 첫번째는 실행할 함수이고, 두번째는 의존성 배열임

 

현재 진행중인 프로젝트에서의 코드 예시)

useEffect(() => {
    handleSearchClick(false);
    setCheckList([]);
}, [page]);

 

첫번째 매개변수중 하나인 handleSerchClick(false) 함수가 실행됨. 함수의 인자로 false 를 넘겨줌

이 함수는 API 호출을 포함하고 있어서 컴포넌트가 마운트될 때 또는 페이지가 변경될 때 데이터를 다시 가져오는 역할을 함

그리고 setCheckList([]) 함수가 실행되어 checkList 상태를 빈 배열로 설정함. 새로운 데이터를 가져오기 전에 체크 리스트를 초기화함

 

두번째 매개변수인 [page]는 언제 useEffect가 실행될지를 결정하는데

배열에 page가 포함돼있기 때문에 컴포넌트가 처음 마운트 되거나 page 값이 변경될 때 마다 useEffect 내부의 함수가 실행됨.

하지만 두번째 매개변수에 빈배열 []을 주면 useEffect 함수는 처음 렌더링시에만 실행됨

 

 

 

 

정리하자면 useEffect 함수는 최초 랜더링시에는 무조건 1회 실행되고

두번째 매개변수의 유무와 조건에 따라 제랜더링시 작동 유무가 갈림

 

정리 예시)

//두번째 매개변수로 빈배열 사용
useEffect(() => {
  console.log('최초 렌더링 시만 실행됩니다.');
}, []);


// 의존성 배열 [count] 사용
useEffect(() => {
  console.log('최초 렌더링 시와 count 변경 시 실행됩니다.');
}, [count]);


// 두번째 매개변수를 생략
useEffect(() => {
  console.log('최초 렌더링 시와 이후 모든 렌더링 시 실행됩니다.');
});