Question 1

React에서 Context API란 무엇인가요?

Accepted Answer

Context API는 React에 내장된 메커니즘으로, 모든 레벨에서 명시적으로 props를 전달하지 않고 컴포넌트 간에 데이터를 공유할 수 있습니다. 모든 자손 컴포넌트가 접근할 수 있는 전역 상태를 생성하여 prop drilling 문제를 해결합니다. Context는 테마, 언어, 인증된 사용자 정보처럼 거의 변경되지 않는 데이터에 특히 적합합니다.

Question 2

새로운 Context를 생성하는 데 사용되는 함수는 무엇인가요?

Accepted Answer

createContext 함수는 새로운 컨텍스트를 초기화하는 React의 기본 메서드입니다. 컴포넌트가 부모 Provider 없이 Context를 사용할 경우에 사용될 선택적 기본값을 받습니다. 이 함수는 Provider와 Consumer를 포함하는 객체를 반환하지만, Consumer는 현대적인 hook에서는 거의 사용되지 않습니다.

Question 3

Context 값을 소비하는 데 사용되는 hook은 무엇인가요?

Accepted Answer

useContext hook은 자식 컴포넌트가 컴포넌트 트리에서 가장 가까운 Provider가 제공하는 값을 읽을 수 있게 합니다. 이전 Consumer API를 대체하며 더 간결하고 가독성 있는 구문을 제공합니다. 컴포넌트는 Context 변경에 자동으로 재구독하고 그에 맞게 업데이트됩니다.

Context를 활용한 상태 관리

React에서 Context API란 무엇인가요?

답변

새로운 Context를 생성하는 데 사용되는 함수는 무엇인가요?

답변

Context 값을 소비하는 데 사용되는 hook은 무엇인가요?

답변

Context에 값을 제공하는 데 사용되는 컴포넌트는 무엇인가요?

컴포넌트가 부모 Provider 없이 useContext를 사용하면 어떻게 되나요?

기타 React / Next.js 면접 주제

JavaScript 기초

React 기초

React Hooks

컴포넌트 라이프사이클

React Router

폼과 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을 마스터하세요