useEffect

: 컴포넌트가 렌더링 된 이후, 특정 작업을 수행 하도록 설정할 수 있는 hook

: 렌더링 된 이후에 실행된다

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

function StatusComponent() {
  const [status, setStatus] = useState('inactive');

  useEffect(() => {
    console.log(`Status changed to: ${status}`);
  }, [status]);
  return (
    <div>
      <p>Current status: {status}</p>
      <button onClick={() => setStatus('active')}>Activate</button>
      <button onClick={() => setStatus('inactive')}>Deactivate</button>
    </div>
  );
}

export default StatusComponent;

위 코드를 예로 설명 하면
1. useState 훅을 사용하여 status라는 상태 변수를 선언
2. 초기값은 'inactive'
3. useEffect 훅을 사용하여 status가 변경될 때마다 특정 작업을 수행
4. 의존성 배열은 status를 주어 변경될 때마다 useEffect 내부의 콜백 함수가 실행
5. console.log로 상태 변화 메세지를 출력
6. return 부분에서 렌더링을 진행
6-1 status 상태 값을 표출
6-2 버튼을 이용하여 지정한 setStatus 값이 호출되어 status 상태가 변경
의 순서대로 코드가 실행된다.

• 의존성 배열

: 배열 안 값을 입력하면 해당 값이 변경될 때만 useEffect를 실행

: 컴포넌트가 렌더링 된 후 한번만 실행하고 싶을 때 '[]' 빈 배열로 놓으면 된다.

: 배열 안 value 값을 넣을 경우엔 빈 배열과는 반대로 계속적으로 실행된다.

코드 상황에 맞게 적절히 사용해주면 굉장히 유용해 보인다.