React 개념 정리 10일차 (useEffect)

 React의 Hook 중 하나로, 함수형 컴포넌트에서 Side Effect(부수 효과)를 처리하기 위해 사용된다. React 컴포넌트가 렌더링된 이후 특정 작업을 수행하도록 설정할 수 있다.

useEffect는 컴포넌트의 생명주기와 관련된 작업을 처리하기 위한 강력한 도구이다. 이를 통해 데이터 가져오기, 구독 설정, DOM 조작 등 다양한 Side Effect를 효율적으로 관리할 수 있다.

// src/App.js

import React, { useEffect } from "react";

const App = () => {

  useEffect(() => {
		// 렌더링 후 실행된다.
    console.log("hello bro");
  });

  return <div>Home</div>;
}

export default App;

App 컴포넌트가 화면에 렌더링 된 이후 useEffect 안에 있는 console.log가 실행됨, useEffect 는 컴포넌트가 렌더링 된 이후에 실행된다는 것이 중요한 포인트이다.

 

useEffect와 리렌더링(re-rendering)

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

const App = () => {
  const [value, setValue] = useState("");

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

  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(event) => {
          setValue(event.target.value);
		      console.log("value => ", value);
        }}
      />
    </div>
  );
}

export default App;

아마도 다 알 것이다. 의존선 배열을 추가하지 않았기 때문에 value 값이 변경됨에 따라 "hello bro'가 계속 실행될 것이다.

 

의존성 배열

useEffect는 두 번째 매개변수로 배열을 받는데 그것을 의존성 배열이라고 한다. 배열에 지정한 값이 변경될 때만 useEffect가 실행되며 빈 배열을 전달하면 컴포넌트가 처음 마운트될 때 한 번만 실행됨. 

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

 

clean up

useEffect 내부에서 반환하는 함수는 컴포넌트가 언마운트 되거나 의존성이 변경될 때 실행된다. 이를 통행 이벤트 리스너 제거, 타이머 해제 등 정리 작업을 수행하는 역할을 한다.

useEffect(() => {
  const timer = setInterval(() => {
    console.log('타이머 작동 중...');
  }, 1000);

  return () => {
    clearInterval(timer); // 컴포넌트 언마운트 시 타이머 정리
    console.log('타이머가 정리되었습니다.');
  };
}, []);

 

주의사항

의존성 배열 관리:

의존성 배열에 필요한 값을 정확히 넣지 않으면 예상치 못한 동작이나 무한 루프가 발생할 수 있다.

 

클린업 함수 작성:

이벤트 리스너나 타이머 같은 리소스를 사용하는 경우 반드시 클린업 함수를 작성해야 메모리 누수를 방지할 수 있다.

 

렌더링 차단 없음:

useEffect는 비동기로 동작하며, 브라우저의 화면 업데이트를 차단하지 않는다.