율곡선생 75기 11강 Memoization React Hook 함수 useCallMemo

📝 메모리제이션 함수 이해하기

메모리제이션은 함수의 실행 결과를 캐시에 저장하여 동일한 입력에 대해 반복 계산을 방지하는 기법입니다. 리액트에서는 메모 함수를 통해 컴포넌트의 렌더링을 제어할 수 있습니다. 메모 함수는 컴포넌트의 props가 변경되지 않으면 이전의 렌더링 결과를 반환하여 불필요한 렌더링을 방지합니다. 이로 인해 성능이 향상되며, 특히 복잡한 컴포넌트 구조를 가진 대규모 애플리케이션에서 유용하게 사용됩니다. 실제로 메모리제이션을 적용하면 컴포넌트의 상태나 props에 변화가 있을 때만 렌더링이 발생하여, 사용자 경험이 더욱 부드러워집니다.

🚀 유즈 메모의 활용

유즈 메모는 리액트 훅으로, 값의 변화를 감지하여 필요한 경우에만 계산을 수행하도록 합니다. 이는 이전의 계산 결과를 기억하여 동일한 입력에 대해 재계산을 방지합니다. 예를 들어, 배열의 길이를 계산하는 작업이 있다고 가정할 때, 유즈 메모를 사용하면 배열이 변경되지 않는 한 계산 작업을 재실행하지 않습니다. 이를 통해 불필요한 성능 소모를 줄일 수 있습니다. 특히, 복잡한 계산이나 API 호출 등의 작업이 있는 경우 유즈 메모를 활용하면 성능을 크게 개선할 수 있습니다.

📈 성능 향상을 위한 전략

리액트의 성능을 향상시키기 위해서는 메모리제이션뿐만 아니라 여러 전략을 함께 사용하는 것이 좋습니다. 첫째, 컴포넌트를 필요에 따라 분리하여 관리하는 것이 중요합니다. 둘째, 불필요한 렌더링을 방지하기 위해 메모리제이션과 유즈 콜백을 적절히 활용합니다. 셋째, 비동기 작업을 효율적으로 처리할 수 있는 상태 관리 라이브러리를 사용하여 데이터 흐름을 최적화합니다. 이러한 전략을 통합하여 사용하면, 리액트 애플리케이션의 전반적인 성능을 크게 향상시킬 수 있습니다.

🔄 유즈 메모와 유즈 콜백의 차이

유즈 메모와 유즈 콜백은 모두 리액트의 성능 최적화에 기여하지만, 사용 목적이 다릅니다. 유즈 메모는 값의 메모리제이션을 목적으로 하며, 유즈 콜백은 함수를 메모리제이션하여 컴포넌트가 재렌더링될 때마다 동일한 함수 인스턴스를 사용할 수 있도록 합니다. 이는 함수가 자주 변경되는 경우에 유용하며, 자식 컴포넌트에 props로 전달되는 콜백 함수가 변경되지 않도록 함으로써 불필요한 렌더링을 방지합니다. 이러한 차이를 이해하고 적절히 활용함으로써 리액트 애플리케이션의 성능을 보다 효율적으로 개선할 수 있습니다.

🛠️ 상태 관리와 타입스크립트 활용

타입스크립트는 리액트와 함께 사용할 때 코드의 안전성을 높이고, 에러를 사전에 방지할 수 있는 강력한 도구입니다. 상태 관리에서 타입스크립트를 활용하면 상태의 형태와 구조를 명확히 정의할 수 있어, 예기치 않은 버그를 줄일 수 있습니다. 예를 들어, 문자열 배열을 관리하는 상태가 있다고 할 때, 해당 상태의 타입을 명시적으로 지정하여 다른 타입의 값이 할당되지 않도록 방지할 수 있습니다. 이를 통해 코드의 가독성과 유지보수성을 크게 향상시킬 수 있습니다.

🔗 공식사이트

React 공식사이트