[React,최적화]React에서 useEffect 없이 상태값 자동 업데이트 이해하기

1. 상태값이 연산될 경우, useEffect가 필요 없다

React에서는 useState의 값이 변경되면 자동으로 컴포넌트가 리렌더링되며, 내부의 연산도 함께 업데이트됩니다. 따라서 상태 값을 기반으로 하는 연산은 별도의 useEffect 없이도 자동으로 반영됩니다.

✅ 필요 없는 경우 (자동 업데이트)

• useState 값이 변경되면, 이를 기반으로 한 변수도 자동으로 업데이트됩니다.

const [count, setCount] = useState(0);
const doubled = count * 2; // 자동 업데이트

• count가 변경될 때마다 doubled 값도 새롭게 계산되므로 useEffect가 필요 없습니다.

또한, 리스트 필터링과 같은 경우에도 useEffect 없이 상태를 기반으로 한 연산을 바로 사용하면 됩니다.

const filteredMembers = members.filter(member => member.score > counter);

members나 counter가 변경될 때마다 자동으로 새로운 filteredMembers가 계산되므로 useEffect를 사용할 필요가 없습니다.

2. useEffect가 필요한 경우

반대로, 특정 동작을 상태 변화에 따라 실행하려면 useEffect를 사용해야 합니다.

useEffect(() => {
  console.log(`Counter updated: ${counter}`);
}, [counter]);

• 이 경우 counter가 변경될 때마다 로그를 출력하려면 useEffect가 필요합니다.