파생 상태와 불필요한 렌더링 피하기

파생 상태 = 기존 상태나 프로퍼티에서 계산한 값(예: fullName, 합계, 필터). 버그와 다시 렌더링을 줄이려면 단일 정보 원천을 유지하세요.

• 다른 데이터에서 다시 계산할 수 있다면 계산하세요.
• 계산할 수 없는 사용자 입력이나 서버 데이터만 저장하세요.
• 처리 비용이 큰 파생 값은 메모이제이션하세요.

중복 상태를 동기화하지 마세요. 이 예제는 상태에 fullName을 저장하고 이펙트에서 업데이트하므로 값이 쉽게 서로 어긋나고 렌더링이 추가로 발생합니다.

이름과 성에서 fullName을 계산합니다. 동기화가 필요 없고 다시 렌더링도 줄어듭니다. 결합 작업의 처리 비용이 크다면 useMemo를 사용하세요.

처리 비용이 큰 파생 값(예: 정렬이나 서식 지정)에는 useMemo를 사용하여 입력값이 변경될 때만 결과를 다시 계산하세요.

중복 상태와 동기화 이펙트는 피하세요. 파생 값을 우선 사용하고 처리 비용이 큰 작업은 메모이제이션하세요. 오래된 데이터가 생기지 않도록 종속성 배열을 정확하게 유지하세요.

요약: 단일 정보 원천을 유지하세요. 기존 데이터에서 fullName, 합계, 필터를 계산하세요. 불필요한 렌더링을 건너뛰려면 처리 비용이 큰 작업을 메모이제이션하세요.