React 성능 최적화
- React에서 성능 최적화는 애플리케이션의 응답성과 사용자 경험을 향상시키는 데 중요하다.
- 성능 최적화가 필요한 이유와 몇 가지 주요 최적화 기법에 대해 알아보자
왜 성능을 최적화 해야하는가?
- 사용자 경험 향상: 빠르고 부드럽게 동작하는 앱은 사용자 만족도를 높인다.
- 자원 효율성: 최적화된 앱은 기기의 CPU와 메모리를 더 효율적으로 사용한다.
- SEO 개선: 웹 애플리케이션의 경우, 로딩 속도는 검색 엔진 순위에 영향을 준다.
- 비용 절감: 서버 자원을 효율적으로 사용하면 호스팅 비용을 줄일 수 있다.
React에서의 주요 성능 최적화 기법
1. 메모제이션 (useMemo, useCallback):
컴포넌트 리렌더링 시 불필요한 계산이나 함수 재생성을 방지한다.
const memoizedValue = useMemo(()=> computeExpensiveValue(a,b,[a,b]))
const memoizedCallback = useCallback(() => doSomething(a,b),[a,b])2. React.memo
불필요한 리랜더링을 방지하여 성능을 향상시킨다.
const MemoizedComponent = React.memo(myComponent)3. 코드 분할(Code Splitting)
대규모 앱을 작은 청크로 나누어 필요할 때만 로드한다.
const LazyComponent = React.lazy(() => import("./LazyComponent))청크(chunk)란?
소프트웨어 개발, 특히 웹 개발과 모듈 번들링 컨텍스트에서 중요한 개념이다.
정의
코드의 더 작은 부분이나 모듈을 의미한다.
일반적으로 애플리케이션의 전체 코드베이스를 더 작고 관리하기 쉬운 부분으로 나눈 것을 가리킨다.
웹 개발에서의 청크
1. 코드 분할 : 대규모 애플리케이션을 더 작은 JavaScript 파일로 나누는 과정이다. 2. 온디맨드 로딩: 필요할 때만 특정 코드 부분을 로드할 수 있게 한다. 3. 성능 최적화: 초기 로딩 시간을 줄이고 애플리케이션의 반응성을 향상시킨다.주요 이점
1. 더 빠른 초기 로드 시간 2. 효율적인 캐싱 3. 병렬 다운로드 가능성 4. 필요한 코드만 로드하여 자원 사용 최적화
4. 가상화(Virtualization)
긴 목록을 렌더링할 때 화면에 보이는 항목만 렌더링한다.
import {FixedSizeList} from 'react-window'
const Row = ({index, style}) => (
<div style={style}>Row {index}</div>
)
const Example = () => (
<FixedSizeList
height={150}
itemCount={1000}
itemSize={35}
width={300}
>
{Row}
</FixedSizeList>
)5. 상태 관리 최적화
전역상태를 효율적으로 관리하여 불필요한 리렌더링을 줄인다.
ex) Redux, MobX, Recoil등의 라이브러리 사용
6. useEffect 최적화
의존성 배열을 적절히 사용하여 불필요한 효과 실행을 방지
useEffect(() => {
// 필요한 경우에만 실행
},[])마무리
이런 최적화 기법들을 적절히 적용하면 React 애플리케이션의 성능을 크게 향상시킬 수 있다.
하지만 과도한 최적화는 코드의 복잡성을 증가시킬 수 있다.
실제 성능 문제가 발생하는 부분을 정확히 파악하고 적용하는 것이 중요하다.
