Question 1

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

Accepted Answer

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

Question 2

useMemo와 useCallback의 주요 차이점은 무엇인가요?

Accepted Answer

useMemo는 함수의 결과(반환 값)를 메모이제이션하고, useCallback은 함수 자체를 메모이제이션합니다. useMemo는 비용이 큰 계산을 최적화하는 데 사용되며, useCallback은 props로 전달되는 함수 참조를 안정화하여 메모이제이션된 자식 컴포넌트의 불필요한 재렌더링을 방지하는 데 사용됩니다.

Question 3

React.memo의 사용이 역효과를 낼 수 있는 경우는 언제인가요?

Accepted Answer

React.memo는 매 렌더링마다 다른 props를 받는 컴포넌트에서는 역효과를 낼 수 있습니다. props의 얕은 비교 비용만 추가될 뿐 이점이 없기 때문입니다(컴포넌트는 어차피 재렌더링됩니다). React.memo는 동일한 props를 자주 받고 렌더링 비용이 큰 컴포넌트에 사용하는 것이 좋습니다.

React 성능 최적화

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

답변

useMemo와 useCallback의 주요 차이점은 무엇인가요?

답변

React.memo의 사용이 역효과를 낼 수 있는 경우는 언제인가요?

답변

React.memo로 메모이제이션된 컴포넌트에 prop으로 전달되는 함수에 useCallback을 사용하는 이유는 무엇인가요?

React.lazy를 사용한 code splitting의 주요 장점은 무엇인가요?

기타 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

Error Boundaries & 에러 핸들링

Advanced React Patterns

Next.js 고급 기능

Next.js 배포 및 프로덕션

아키텍처 & 디자인 패턴

React Server Components

Next.js 국제화

React 보안 & 모범 사례

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