React 개발을 하다 보면 애플리케이션의 성능을 최적화해야 할 상황이 종종 생긴다. 이 때 사용할 수 있는 기법 중 하나가 Memoization이다.
Memoization이란?
Memoization은 계산 결과를 메모리에 저장해 두고 동일한 계산이 요청될 때 다시 계산하지 않고 저장된 값을 반환하는 최적화 기법이다. 이를 통해 애플리케이션의 속도를 높일 수 있다.
React.memo의 이해와 활용
React.memo는 React 라이브러리에서 제공하는 고차 컴포넌트(HOC)로, 함수형 컴포넌트의 렌더 결과를 메모이징해 성능을 최적화할 수 있다.
작동 원리
React.memo는 props의 얕은 비교(shallow comparison)를 통해 이전과 현재의 props가 같은지 확인한다. 만약 props가 변경되지 않았다면, 이전에 렌더링된 결과를 재사용한다.
사용법
기본적인 사용법은 아래와 같다.
const MyComponent = React.memo(function MyComponent({ name }) {
return <div>{`안녕, ${name}`}</div>;
});여기서 MyComponent는 name props가 변경되지 않는 한 이전 렌더링 결과를 재사용한다.
커스텀 비교 함수
React.memo는 두 번째 인자로 커스텀 비교 함수를 받을 수 있다. 이 함수는 이전 props와 새로운 props를 인자로 받고, 두 값이 같으면 true, 다르면 false를 반환한다.
const areEqual = (prevProps, nextProps) => {
return prevProps.name === nextProps.name;
};
const MyComponent = React.memo(function MyComponent({ name }) {
return <div>{`안녕, ${name}`}</div>;
}, areEqual);주의점
- 얕은 비교: React.memo는 얕은 비교만 수행하므로, 객체나 배열 같은 참조 타입의 props가 변경될 때 문제가 생길 수 있다.
- 메모리 사용량: 메모이징은 메모리에 렌더링 결과를 저장하기 때문에 메모리 사용량이 늘어날 수 있다.
- 불필요한 최적화: 모든 컴포넌트에 React.memo를 사용하는 것은 권장하지 않는다. 성능 이슈가 있는 경우에만 사용하자.
React.memo는 함수형 컴포넌트의 성능을 최적화하기 위한 유용한 도구다. 하지만 사용 시에는 주의점을 고려해야 한다. 성능 이슈가 실제로 발생하는 경우에만 적절히 활용하도록 하자.
React에서 useMemo의 이해와 활용
React 애플리케이션에서 성능 최적화를 고려한다면 useMemo는 중요한 훅 중 하나다. 복잡한 연산이나 빈번한 렌더링이 일어나는 경우, 이 훅을 사용해 성능을 개선할 수 있다.
작동 원리
useMemo는 메모이제이션(memoization)을 통해 연산의 결과값을 저장해 둔다. 이 훅은 의존성 배열이 변경되지 않으면 이전에 계산한 값을 재사용한다.
사용법
기본 사용법은 아래와 같다.
import React, { useMemo } from 'react';
const MyComponent = ({ list }) => {
const sortedList = useMemo(() => {
return list.sort((a, b) => a - b);
}, [list]);
return (
<div>
{sortedList.map((item) => (
<p>{item}</p>
))}
</div>
);
};여기에서 sortedList는 list 배열이 변경될 때만 다시 정렬된다. 그 외의 경우에는 이전에 정렬된 배열을 재사용한다.
의존성 배열
useMemo의 두 번째 인자는 의존성 배열이다. 이 배열 내의 값이 변경되면 useMemo 내부의 코드가 다시 실행된다. 의존성 배열을 잘 관리하는 것이 중요하다.
주의점
- 복잡한 연산만 최적화:
useMemo는 복잡한 연산이나 자주 변경되는 값에 대한 최적화에 적합하다. - 메모리 사용량 증가: 메모이제이션은 메모리에 값을 저장하기 때문에 메모리 사용량이 증가할 수 있다.
- 의존성 배열 관리: 의존성 배열이 잘못 설정되면 예상하지 못한 버그가 발생할 수 있다.
useMemo는 React에서 성능 최적화에 큰 도움을 줄 수 있다. 하지만 언제나 그렇듯, 이 훅도 적절한 상황과 조건에서 사용해야 최대의 효과를 볼 수 있다. 성능 문제가 발생할 때만 고려해서 사용하는게 바람직하다.
React에서 useCallback의 깊은 이해와 활용
useCallback은 React에서 제공하는 훅 중 하나로, 함수를 메모이징해서 성능을 최적화할 수 있는 기능을 제공한다.
작동 원리
useCallback 훅은 주어진 함수와 의존성 배열을 인자로 받아, 메모이징된 함수를 반환한다. 의존성 배열의 값이 변경되지 않는다면 이전에 생성된 함수를 재사용한다.
기본 사용법
useCallback의 기본 사용법은 다음과 같다.
import React, { useCallback } from 'react';
const MyButton = ({ onClick, label }) => {
return <button onClick={onClick}>{label}</button>;
};
const App = () => {
const handleClick = useCallback(() => {
console.log('Button clicked!');
}, []);
return <MyButton onClick={handleClick} label="클릭해줘!" />;
};의존성 배열
useCallback의 두 번째 인자는 의존성 배열이다. 이 배열 내의 값이 변경되면 새로운 함수를 생성하고 메모이징한다. 배열이 비어 있다면 컴포넌트가 처음 마운트될 때 생성한 함수를 계속해서 재사용한다.
const handleClick = useCallback(() => {
console.log(`Button clicked ${count} times`);
}, [count]);주의점
- 오버헤드:
useCallback을 무분별하게 사용하면 오히려 성능 문제가 생길 수 있다. - 의존성 배열 관리: 의존성 배열을 잘못 관리하면 예상치 못한 동작이나 버그를 유발할 수 있다.
- 함수 내부 상태:
useCallback으로 메모이징된 함수가 클로저를 형성하므로 함수 내부에서 사용하는 외부 변수에 주의해야 한다.
사용 시나리오
- 이벤트 핸들러 최적화
- 자주 발생하지만 연산이 복잡하지 않은 함수 메모이징
- 자식 컴포넌트에 함수를 props로 전달할 때 불필요한 렌더링 방지
useCallback은 React 애플리케이션에서 성능 최적화를 위해 유용하게 사용할 수 있는 훅이다. 하지만 잘못 사용하면 오히려 성능 문제를 유발할 수 있으므로 적절한 상황에서만 사용해야 헌다.
