# React 작동 방식 및 DOM 렌더링 관련 질문과 답변
-
Q: React의 가상 DOM(Virtual DOM)이란 무엇이며, 어떤 이점이 있나요? A: 가상 DOM은 실제 DOM의 가벼운 복사본입니다. React는 이를 메모리에 유지하며, 실제 DOM과 동기화합니다.
이점:
- 성능 향상: 실제 DOM 조작은 비용이 크지만, 가상 DOM 조작은 훨씬 빠름
- 효율적인 업데이트: 변경사항을 한 번에 배치로 처리
- 크로스 플랫폼: DOM이 없는 환경(예: React Native)에서도 동일한 프로그래밍 모델 사용 가능
-
Q: React의 렌더링 과정을 설명해주세요. A: React의 렌더링 과정은 다음과 같습니다:
- 상태 변경 감지
- 렌더 단계 (Render Phase):
- 컴포넌트 함수 호출 또는 render 메서드 실행
- 가상 DOM 트리 생성
- 재조정 (Reconciliation):
- 이전 가상 DOM과 새로운 가상 DOM 비교
- 변경된 부분 식별
- 커밋 단계 (Commit Phase):
- 실제 DOM에 변경 사항 적용
- 브라우저 렌더링: DOM 변경에 따른 화면 업데이트
-
Q: React의 'diffing' 알고리즘에 대해 설명해주세요. A: Diffing 알고리즘은 React가 이전 가상 DOM 트리와 새로운 가상 DOM 트리를 비교하는 과정입니다.
주요 특징:
- 두 트리의 루트 요소부터 비교 시작
- 요소 타입이 다르면 이전 트리를 버리고 새로운 트리로 완전히 교체
- 같은 타입의 요소는 속성만 업데이트
- 리스트 렌더링 시 'key' prop을 사용하여 효율적으로 비교
-
Q: React의 렌더링 최적화 방법에는 어떤 것들이 있나요? A: 주요 최적화 방법:
- React.memo를 사용한 컴포넌트 메모이제이션
- useMemo와 useCallback을 이용한 값과 함수의 메모이제이션
- shouldComponentUpdate 라이프사이클 메서드 활용 (클래스 컴포넌트)
- 불필요한 렌더링을 피하기 위한 상태 구조화
- 대규모 리스트를 위한 가상화 (react-window 등 사용)
- Code Splitting과 Lazy Loading을 통한 초기 로드 최적화
-
Q: React의 Concurrent Mode란 무엇인가요? A: Concurrent Mode는 React 애플리케이션의 반응성을 향상시키기 위한 새로운 기능 세트입니다.
주요 특징:
- 렌더링 작업의 우선순위 지정 가능
- 긴 렌더링 작업을 작은 단위로 나누어 처리
- 사용자 상호작용에 더 빠르게 반응
- 네트워크 상태에 따른 UI 업데이트 조절 (Suspense)
-
Q: React의 서버 사이드 렌더링(SSR)이란 무엇이며, 어떤 이점이 있나요? A: SSR은 초기 렌더링을 서버에서 수행하여 완성된 HTML을 클라이언트에 전송하는 기술입니다.
이점:
- 초기 로딩 속도 향상
- 검색 엔진 최적화(SEO) 개선
- 소셜 미디어 공유 시 더 나은 미리보기 제공
- 저사양 기기에서의 성능 향상
-
Q: React의 Fiber 아키텍처에 대해 설명해주세요. A: Fiber는 React 16에서 도입된 새로운 재조정 엔진입니다.
주요 특징:
- 렌더링 작업을 작은 단위(fiber)로 분할
- 우선순위에 따른 작업 처리 가능
- 렌더링 작업의 일시 중지, 재개, 중단 가능
- 비동기 렌더링 지원으로 더 부드러운 UI 경험 제공
-
Q: React에서 'key' prop의 역할은 무엇인가요? A: 'key' prop은 리스트 렌더링 시 각 항목을 고유하게 식별하는 데 사용됩니다.
역할:
- 효율적인 리스트 업데이트 (항목 추가, 제거, 재정렬)
- 컴포넌트의 상태 유지
- 불필요한 리렌더링 방지
주의: index를 key로 사용하는 것은 항목 순서가 변경될 수 있는 경우 문제를 일으킬 수 있으므로 가능한 고유한 ID 사용 권장