React.js 인터뷰 질문 핵심 요약 및 개념 설명

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• React 개발자 또는 프론트엔드 기술 면접 준비자
• 중급~고급 수준 (Virtual DOM, 상태 관리, 성능 최적화 등 기술적 개념 이해 필요)

핵심 요약

• Virtual DOM: React는 Virtual DOM을 통해 실제 DOM 변경을 최소화하여 성능 향상 (예: reconciliation 프로세스)
• State vs Props: state는 컴포넌트 내부에서 변경 가능한 상태 (setState() 사용), props는 부모에서 자식으로 전달되는 읽기 전용 데이터
• Higher Order Component(HOC): HOC은 공통 로직 재사용을 위해 component를 감싸서 새로운 컴포넌트를 반환 (예: 인증 로직 추가)
• Server-Side Rendering (SSR): 서버에서 초기 HTML 생성 → 빠른 로딩 및 SEO 최적화 (예: Next.js 활용)
• useEffect: 함수형 컴포넌트에서 사이드 이펙트 처리 (예: 데이터 로딩, 타이머 설정) → dependency array로 실행 조건 제어

섹션별 세부 요약

1. React 개요

• React는 JavaScript 라이브러리로, 재사용 가능한 UI 컴포넌트와 상태 관리를 통해 웹 애플리케이션 개발
• 주요 특징: 가상 DOM 사용, 성능 최적화, 컴포넌트 기반 아키텍처

2. Virtual DOM과 Reconciliation

• Virtual DOM: 실제 DOM 변경 대신 가상 DOM을 생성하여 비교 → 최소한의 DOM 조작
• Reconciliation: 가상 DOM과 실제 DOM 비교 → 변경된 부분만 업데이트 (예: diffing algorithm 사용)

3. State vs Props

• State: setState()로 업데이트, 컴포넌트 내부 상태 (예: useState() 훅 사용)
• Props: 부모에서 자식으로 전달, 읽기 전용 (예: props.children 사용)

4. Higher Order Component (HOC)

• HOC: function(Component) → new Component 반환, 공통 로직 추상화
• 예시: 인증 로직 추가 → withAuth(OriginalComponent) 형태로 사용

5. Server-Side Rendering (SSR) vs Client-Side Rendering (CSR)

• SSR: 서버에서 초기 HTML 생성 → 빠른 로딩 및 SEO 호환 (예: Next.js 활용)
• CSR: 클라이언트에서 앱 생성 → 동적 UI 가능, 최초 로딩 지연

6. useEffect Hook

• useEffect: 함수형 컴포넌트의 사이드 이펙트 관리 (예: 데이터 로딩, 타이머)
• 의존성 배열: [] → 처음 렌더링 시만 실행, [value] → value 변경 시 실행

7. 이벤트 처리

• React 이벤트: onClick, onChange 등 이벤트 핸들러를 컴포넌트로 전달
• 이벤트 객체: event.target, event.type 등 정보 포함

8. 성능 최적화

• Best Practices:
• React.memo 또는 useMemo로 불필요한 렌더링 방지
• lazy()와 Suspense로 컴포넌트 지연 로딩
• PureComponent 사용 → 상태 변경 시만 렌더링

9. 테스트

• 테스트 프레임워크: Jest (단위 테스트), Enzyme (컴포넌트 테스트)
• 모의 함수: jest.fn()으로 이벤트 핸들러 동작 검증

결론

• React 핵심 개념 (Virtual DOM, 상태 관리, HOC)을 정확히 이해하고, 성능 최적화 기법 (useMemo, React.memo, lazy)을 실무에 적용해야 한다.
• 면접 대비 시, SSR/CSR 차이, useEffect 의존성 배열 사용법, props와 state 구분 등을 구체적인 예시와 함께 설명해야 한다.