React - useEffect

• 의존성이 변경될 때 실행되게 만드는 것
• 입력값이나, 유효성이 바뀌어서 계속 확인해야하는 input 검증에 많이 쓰임.
  (예를들어, 회원 가입 시 비밀번호 설정할 때 특수 문자 안되게 하는)
• useEffect는 2번째 인자로 의존성 배열을 받는데 (의존성 배열의 값이 변경될 때 useEffect 실행 됨)
  • 의존성 배열은 useEffect에게 알려주는 것으로, 해당 배열 안에 포함된 상태나 프로퍼티가 변경되었을 때에만 useEffect의 작업이 실행되어야 함을 의미함
  • 의존성 배열을 사용하지 않거나 빈 배열([])로 지정한다면, useEffect의 작업은 컴포넌트가 처음 렌더링되었을 때 한 번만 실행됩니다.

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

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Count changed!');
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

• 위의 코드에서 useEffect는 count 상태가 변경될 때마다 실행되도록 설정되어 있음
• 의존성 배열 [count]은 count 상태에 의존하고 있으므로, count 값이 변경될 때마다
  useEffect의 작업인 console.log('Count changed!')가 실행됩니다.