율곡선생 75기 10강 Memoization React Hook 함수 - React.memo, useCallback ,함수형 update

📘 메모이제이션의 이해

메모이제이션은 동일한 계산을 반복적으로 수행하는 것을 방지하여 성능을 향상시키는 기술입니다. 리액트에서는 React.memo를 사용하여 컴포넌트가 동일한 props로 다시 렌더링되는 것을 방지할 수 있습니다. 이 방법은 특히 부모 컴포넌트가 자주 리렌더링되는 경우 자식 컴포넌트의 불필요한 리렌더링을 막는 데 유용합니다. 메모이제이션을 통해 컴포넌트의 상태가 변경되지 않는 한, 이전에 계산된 결과를 재사용함으로써 애플리케이션의 성능을 최적화할 수 있습니다.

🚀 리액트에서 메모 사용법

리액트에서 React.memo를 사용하는 방법은 매우 간단합니다. 원하는 컴포넌트를 React.memo로 감싸기만 하면 됩니다. 이렇게 하면 해당 컴포넌트는 props가 변경되지 않는 한 다시 렌더링되지 않습니다. 예를 들어, const EnhancedComponent = React.memo(MyComponent);와 같이 사용합니다. 이러한 방식은 리렌더링이 빈번하게 발생하는 대형 프로젝트에서 특히 유용합니다. 하지만 모든 컴포넌트에 메모이제이션을 적용하는 것은 성능상의 이점을 제공하지 않을 수 있으므로, 필요에 따라 전략적으로 사용하는 것이 중요합니다.

🔄 부모와 자식 컴포넌트의 렌더링

리액트 컴포넌트의 렌더링 과정에서 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 자동으로 리렌더링됩니다. 이런 경우, 자식 컴포넌트가 실제로는 업데이트가 필요하지 않음에도 불구하고 불필요한 렌더링이 발생할 수 있습니다. React.memo는 이러한 문제를 해결하는 데 효과적입니다. 부모 컴포넌트의 상태 변경이 자식 컴포넌트에 영향을 미치지 않는 경우, React.memo를 통해 자식 컴포넌트의 리렌더링을 방지할 수 있습니다. 이를 통해 애플리케이션의 성능을 크게 향상시킬 수 있습니다.

🛠️ 리액트 성능 최적화 기법

리액트 애플리케이션의 성능을 최적화하기 위한 방법은 다양합니다. 그 중에서도 메모이제이션과 함께 useCallback 훅을 사용하는 것이 강력한 성능 최적화 기법으로 손꼽힙니다. useCallback 훅은 함수의 인스턴스를 기억하여 불필요한 함수 재생성을 방지합니다. 이 외에도, 컴포넌트 구조를 단순화하고 불필요한 상태 업데이트를 최소화하는 등의 방법이 있습니다. 성능 최적화는 결국 사용자 경험을 향상시키는 데 중점을 두어야 하며, 필요에 따라 적절한 기법을 선택하여 적용하는 것이 중요합니다.

🔍 유즈콜백으로 함수 최적화

useCallback 훅은 리액트에서 함수 메모이제이션을 제공하여, 함수가 불필요하게 재생성되는 것을 방지합니다. 이 훅은 주로 컴포넌트가 자주 리렌더링되며 동일한 함수가 반복적으로 생성되는 상황에서 유용하게 사용됩니다. 예를 들어, 이벤트 핸들러나 콜백 함수가 빈번하게 변경되는 경우에 useCallback을 활용하면 성능을 최적화할 수 있습니다. useCallback은 의존성 배열을 활용하여 지정한 값이 변경되지 않는 한 동일한 함수 인스턴스를 유지합니다.

🌐 공식사이트

리액트 공식 홈페이지에서 더 많은 정보를 확인할 수 있습니다. React 공식 사이트