React에서 상태와 계산된 값의 차이 이해하기

개요

• React를 사용하다 보면 상태(state)와 계산된 값 사이의 미묘한 차이를 이해하는 것이 중요함.
• 상태 할당과 계산된 값의 차이점을 실제 코드 예제와 함께 설명

1. 단순 할당 vs 계산된 값

단순 할당 (정적 참조)

const test = userList; // 정적인 참조, 업데이트 안됨

• 이 경우 test는 userList의 초기 상태를 한 번만 참조함.
• userList가 변경되어도 test는 변하지 않음.
• 메모리 주소를 복사하는 것과 같음.

계산된 값 (동적 계산)

const complUserList = userList.filter(user => user.completed === true);

• 이 경우 complUserList는 매 렌더링 시 새로 계산됨.
• userList가 변경되면 자동으로 새로운 값으로 업데이트됨
• 배열의 filter(), map() 등의 메서드를 사용할 때 발생함

2. 실제 예제로 확인하기

function UnnecessaryState() {
  const [userList, setUserList] = useState(MOCK_DATA);
  
  // 매 렌더링마다 다시 계산됨
  const complUserList = userList.filter((user) => user.completed === true);

  return (
    <div>
      <ul>
        {/* 전체 리스트 */}
        {userList.map((user) => (
          <li key={user.id}>{user.title}</li>
        ))}
      </ul>
      <ul>
        {/* 완료된 리스트 - userList 변경 시 자동 업데이트 */}
        {complUserList.map((user) => (
          <li key={user.id}>{user.title}</li>
        ))}
      </ul>
    </div>
  );
}

3. 주의할 점

• 계산된 값은 매 렌더링마다 다시 계산되므로 성능에 영향을 줄 수 있음.
• 복잡한 계산의 경우 useMemo를 사용하여 최적화할 수 있음.