컴포넌트 최적화가 필요한 이유
React 앱은 컴포넌트 단위로 작동합니다. 각 컴포넌트는 자체적으로 상태(State)를 가지며, 상태가 변경되면 해당 컴포넌트와 그 자식 컴포넌트들이 다시 렌더링됩니다. 이 때문에 큰 규모의 애플리케이션에서는 불필요한 렌더링이 발생하여 성능이 저하될 수 있습니다. 따라서 컴포넌트 최적화는 앱의 빠른 로딩과 반응성을 확보하는 데에 중요한 역할을 합니다.
React.memo를 활용한 메모이제이션
React.memo는 컴포넌트를 메모이제이션하여 불필요한 렌더링을 방지하는 방법입니다. 메모이제이션은 컴포넌트의 출력 결과를 기억하고, 같은 입력값으로 다시 호출될 때 이전에 계산한 결과를 재사용하는 기술입니다. 컴포넌트를 React.memo로 감싸면, 컴포넌트의 속성이나 상태가 변경되지 않는 한 이전에 렌더링된 결과를 재사용합니다.
useCallback과 useMemo를 사용한 불필요한 렌더링 방지
함수형 컴포넌트에서 함수를 정의할 때, useCallback과 useMemo를 사용하여 불필요한 렌더링을 방지할 수 있습니다. useCallback은 컴포넌트가 렌더링될 때마다 새로운 함수가 생성되는 것을 막아줍니다. useMemo는 계산 비용이 큰 결과를 캐싱하여 불필요한 재계산을 막아줍니다.
