5. [ReactJS] useEffect 특정 상태에서 랜더링하기

useEffect

• useEffect는 React의 훅(Hook) 중 하나로, 컴포넌트가 렌더링될 때나 특정 상태가 변경될 때 특정 작업을 수행할 수 있도록 도와줍니다. useEffect를 사용하여 컴포넌트의 생명주기 메서드나 사이드 이펙트 로직을 작성할 수 있습니다.

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 컴포넌트가 마운트될 때 실행되는 작업
    console.log('컴포넌트가 마운트됨');

    return () => {
      // 컴포넌트가 언마운트될 때 실행되는 작업 (정리(clean-up) 함수)
      console.log('컴포넌트가 언마운트됨');
    };
  }, []);

  useEffect(() => {
    // 특정 상태가 변경될 때 실행되는 작업
    console.log('특정 상태가 변경됨');
  }, [specificState]);

  useEffect(() => {
    // 여러 종속성을 가진 경우
    console.log('종속성 1 또는 종속성 2가 변경됨');
  }, [dependency1, dependency2]);

  return <div>컴포넌트 내용</div>;
}

export default MyComponent;

 

• useEffect는 함수형 컴포넌트 내부에서 호출되어야 합니다. 첫 번째 매개변수로는 작업을 수행할 콜백 함수를 전달합니다. 이 콜백 함수는 컴포넌트가 렌더링될 때마다 실행됩니다. 두 번째 매개변수로는 종속성(dependency) 배열을 전달합니다. 이 배열은 useEffect가 실행되는 조건을 제어합니다.
  
  
• 종속성(dependency) 배열: 종속성 배열은 선택적으로 사용할 수 있습니다. 이 배열에는 useEffect가 실행되는 조건을 명시적으로 지정할 수 있는 상태나 props 값을 포함할 수 있습니다. 배열에 포함된 값이 변경될 때만 useEffect 콜백 함수가 실행됩니다. 만약 종속성 배열을 전달하지 않으면 useEffect는 매 렌더링 시마다 실행됩니다.

---

예시.

function App() {
  const [counter, setValue] = useState(0);
  const onClick = () => setValue((current) => current + 1);

  useEffect(() => {
    alert("10 도달");
  }, [counter === 10]);
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>Up</button>
    </div>
  );
}

 

• counter와 setValue라는 두 개의 상태 변수를 useState 훅을 사용하여 선언하였습니다. counter는 현재 카운터 값을 저장하고, setValue는 counter 값을 갱신하는 함수입니다. 초기값으로 0을 설정하였습니다.
  
  
• onClick이라는 이벤트 핸들러 함수를 정의하였습니다. 이 함수는 버튼 클릭 시 setValue 함수를 호출하여 counter 값을 1 증가시킵니다.
  
  
• useEffect 훅을 사용하여 특정 조건에 따라 동작을 수행하도록 설정하였습니다. useEffect 콜백 함수는 컴포넌트가 마운트될 때 한 번 실행되며, 그 이후에는 counter 값이 10이 되었을 때만 실행됩니다. 콜백 함수 내부에는 "10 도달"이라는 알림 창이 표시되는 alert 함수가 포함되어 있습니다.
  
  
• JSX를 사용하여 컴포넌트의 렌더링 결과를 반환합니다. h1 태그에는 현재 counter 값을 출력하고, 버튼을 클릭할 때마다 onClick 이벤트 핸들러 함수가 호출되도록 설정하였습니다.
  
  
• 즉, 위의 코드는 카운터 값을 표시하고 버튼 클릭 시 카운터 값을 1씩 증가시키는 기능을 가지고 있습니다. 또한, useEffect를 사용하여 counter 값이 10이 되었을 때 알림 창을 표시합니다.