Question 1

let과 var의 주요 차이점은 무엇입니까?

Accepted Answer

let은 블록 스코프 변수를 선언합니다. 즉, 정의된 블록(중괄호 사이) 내에서만 존재합니다. var는 함수 스코프를 가지며, 변수가 함수 전체에서 접근 가능하기 때문에 예상치 못한 버그를 유발할 수 있습니다. 기본적으로 let을 사용하면 hoisting 문제와 루프나 조건문에서의 변수 누출을 방지할 수 있습니다.

Question 2

React에서 JSX란 무엇입니까?

Accepted Answer

JSX는 HTML과 유사한 마크업을 JavaScript 코드 내에 직접 작성할 수 있게 해주는 JavaScript 구문 확장입니다. 컴파일 시 Babel에 의해 React.createElement 함수 호출로 변환됩니다. JSX를 사용하면 코드가 더 읽기 쉬워지고, 타이핑을 통한 컴파일 시점 오류 감지가 가능해지며, JavaScript의 강력함과 친숙한 구문을 결합할 수 있습니다.

Question 3

React의 useState 훅이란 무엇인가요?

Accepted Answer

useState는 함수형 컴포넌트에서 로컬 상태를 관리하는 React 훅입니다. 매 렌더링마다 초기화되는 일반 JavaScript 변수와 달리, useState는 연속적인 렌더링 간에 상태 값을 보존합니다. 이 훅은 현재 상태 값과 업데이트 함수를 포함하는 배열을 반환하며, 상태가 변경되면 컴포넌트의 재렌더링을 자동으로 트리거합니다.

Question 4

React 컴포넌트에서 mounting이란 무엇인가요?

Accepted Answer

마운팅은 컴포넌트가 처음으로 생성되어 DOM에 삽입되는 단계입니다. 이 단계에서 React는 state를 초기화하고, 생성 코드를 실행하며 첫 번째 렌더링을 수행합니다. useEffect를 통해 API 호출을 시작하거나 구독을 초기화하기에 가장 적합한 순간입니다.

Question 5

React에서 CSS Module이란 무엇인가요?

Accepted Answer

CSS Modules는 클래스 이름에 해시를 추가하여 고유한 클래스 이름을 자동으로 생성함으로써 컴포넌트 간 스타일 충돌을 방지합니다. 각 CSS Module 파일은 전통적인 전역 스타일시트와 달리 자체적인 로컬 스코프를 갖습니다. 이 접근법은 다른 컴포넌트에서 실수로 덮어쓸 위험 없이 모듈화된 스타일을 작성할 수 있게 해줍니다.

Question 6

Next.js의 App Router란 무엇인가요?

Accepted Answer

App Router는 app/ 디렉토리를 기반으로 하는 Next.js 13+의 새로운 라우팅 시스템입니다. Pages Router를 대체하며 기본적으로 Server Components, 공유 레이아웃, page.tsx, layout.tsx, loading.tsx 같은 파일 규칙을 가진 더 유연한 라우팅 모델을 도입합니다.

Question 7

React 컴포넌트의 props를 타입 지정하는 올바른 구문은 무엇인가요?

Accepted Answer

Props 인터페이스 다음에 Props를 매개변수로 함수를 타입 지정하는 방법이 권장되는 표준 구문입니다. 이 접근법은 뛰어난 타입 추론을 제공하고 코드의 다른 곳에서 Props 타입을 쉽게 재사용할 수 있습니다. React.FC보다 명시적이며 children 타이핑을 더 잘 제어할 수 있습니다.

Question 8

React.memo의 주요 역할은 무엇인가요?

Accepted Answer

React.memo는 컴포넌트의 렌더링 결과를 메모이제이션하는 Higher-Order Component입니다. props의 얕은 비교를 수행하고, props가 변경되지 않았다면 재렌더링을 건너뜁니다. 동일한 props를 자주 받는 비용이 큰 자식 컴포넌트를 최적화하는 데 특히 유용합니다.

Question 9

React에서 Error Boundary란 무엇인가요?

Accepted Answer

Error Boundary는 자식 컴포넌트 트리에서 발생하는 JavaScript 에러를 잡아내고, 폴백 UI를 표시하며, 전체 애플리케이션의 크래시를 방지하는 React 클래스 컴포넌트입니다. componentDidCatch()와 getDerivedStateFromError() 메서드를 사용하여 렌더링 에러를 가로채고 처리합니다.

Question 10

Compound Components 패턴이란 무엇인가요?

Accepted Answer

Compound Components 패턴을 사용하면 React Context를 통해 암묵적인 상태를 공유하는 컴포넌트를 만들 수 있으며, props를 명시적으로 전달할 필요가 없습니다. 이 패턴은 Radix UI와 Headless UI 같은 라이브러리에서 유연하고 조합 가능한 API를 제공하기 위해 사용됩니다. 자식 컴포넌트는 공유 상태에 자동으로 접근할 수 있어, 공통 로직을 잃지 않고 구조를 커스터마이즈할 수 있습니다.

React / Next.js 면접 질문

React / Next.js 면접 준비가 되셨나요?

모든 React / Next.js 주제 탐색

JavaScript 기초

React 기초

React Hooks

컴포넌트 라이프사이클

React Router

Context를 활용한 상태 관리

폼과 Controlled Components

데이터 가져오기 및 API

React Query (TanStack Query)

Styling & CSS-in-JS

Next.js 기초

TypeScript와 React

Next.js 데이터 페칭

Next.js Server Actions

Next.js 라우팅 및 내비게이션

Next.js API Routes

Next.js Metadata & SEO

Next.js Middleware 및 Auth

React 테스트

Zustand State Management

React 성능 최적화

Error Boundaries & 에러 핸들링

Advanced React Patterns

Next.js 고급 기능

Next.js 배포 및 프로덕션

아키텍처 & 디자인 패턴

React Server Components

Next.js 국제화

React 보안 & 모범 사례

다음 면접을 위해 React / Next.js을 마스터하세요