| 요약 |
React 성능 최적화의 중요성
React는 기본적으로 빠른 사용자 인터페이스를 제공하지만, 애플리케이션이 커지면 성능 문제가 발생할 수 있습니다. 최적화를 통해 불필요한 리렌더링을 줄이고 로딩 속도를 개선하며, 사용자 경험을 향상시킬 수 있습니다.
주요 최적화 기법
1. 병목 현상 식별 및 수정
• React 개발자 도구: Profiler를 활용해 느린 컴포넌트나 불필요한 렌더링을 식별합니다.
• 메모리 누수 방지: `useEffect`에서 이벤트 리스너나 `setInterval`을 정리하지 않으면 메모리 누수가 발생할 수 있으니 주의해야 합니다.
2. 메모이제이션
• React.memo: 동일한 props로 렌더링될 때 이전 결과를 재사용하여 불필요한 렌더링을 방지합니다.
useMemo: 계산 비용이 큰 작업의 결과를 캐싱하여 의존성이 변경될 때만 재계산합니다.
const MemoizedComponent = React.memo(MyComponent);
• useCallback: 의존성이 변경될 때만 새로운 콜백 함수를 생성하여 하위 컴포넌트에 전달합니다.
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
3. 코드 분할 및 지연 로딩
• React.lazy와 Suspense: 필요한 컴포넌트만 동적으로 로드하여 초기 번들 크기를 줄입니다.
const LazyComponent = React.lazy(() => import('./MyComponent'));
• Dynamic Import: 특정 이벤트가 발생했을 때만 모듈을 로드합니다.
4. 리스트 렌더링 최적화
• 리스트 항목에 고유한 `key`를 제공하여 React가 변경 사항을 효율적으로 감지하도록 돕습니다.
5. 이미지 및 리소스 최적화
• 이미지 크기를 적절히 조정하고, `loading="lazy"` 속성을 사용해 지연 로딩을 구현합니다.
• 텍스트 압축 및 리소스 캐싱을 통해 로딩 속도를 개선합니다.
성능 측정 도구
• React Profiler: 컴포넌트 렌더링 비용 분석.
• Lighthouse 및 DevTools: 페이지 로딩 성능과 병목 현상 분석.
결론
React 성능 최적화는 애플리케이션의 구조와 요구 사항에 따라 달라질 수 있습니다. 우선 기능을 완성한 후, 병목 현상을 분석하고 적절한 최적화 기법을 적용하는 것이 중요합니다. |
React.js 개발자 면접에서 자주 나오는 5가지 주요 질문과 답변을 요약
1. JSX란 무엇인가?
- JavaScript XML의 약자로, JavaScript 내에서 HTML과 유사한 코드를 작성할 수 있게 해주는 문법
- UI를 더 쉽게 표현할 수 있게 해줌
- Babel과 같은 도구로 일반 JavaScript로 변환됨
2. React의 컴포넌트란?
- 앱의 구성 요소로, UI의 독립적이고 재사용 가능한 부분
- 함수형 컴포넌트와 클래스형 컴포넌트 두 가지 유형이 있음
- 각 컴포넌트는 앱의 일부 기능을 담당하는 미니 프로그램과 같음
3. state와 props의 차이점은?
- state: 컴포넌트 내부의 변경 가능한 데이터 저장소
- props: 부모 컴포넌트에서 자식 컴포넌트로 전달되는 읽기 전용 데이터
4. React 훅이란?
- 함수형 컴포넌트에서 state와 생명주기 기능을 사용할 수 있게 해주는 기능
- 주요 훅: useState(상태 관리), useEffect(부수 효과 처리)
5. Virtual DOM이란?
- 실제 DOM의 가벼운 복사본
- 변경사항을 효율적으로 계산하고 실제 DOM을 최소한으로 업데이트하여 성능 향상
|