# 컴포넌트 라이프사이클 (React / Next.js)

> 마운팅, 업데이팅, 언마운팅, useEffect 정리, 의존성 배열, 라이프사이클 패턴

- 18 면접 질문
- Junior
- [면접 질문: React / Next.js](https://sharpskill.dev/ko/technologies/react-next/interview-questions.md)

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

**답변**

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

## 2. React 컴포넌트에서 unmounting이란 무엇인가요?

**답변**

언마운팅은 컴포넌트가 DOM에서 제거되어 소멸되는 단계입니다. 이 단계는 라우트 변경이나 렌더링 조건 등으로 컴포넌트가 더 이상 필요하지 않을 때 발생합니다. 리소스를 정리하는 중요한 순간입니다: 타이머 취소, WebSocket 연결 닫기, 메모리 누수 방지를 위한 event listener 제거를 수행합니다.

## 3. 기본적으로 useEffect에 전달된 함수는 언제 실행되나요?

**답변**

기본적으로 useEffect는 첫 번째 렌더링을 포함한 모든 컴포넌트 렌더링 후에 실행됩니다. 이 비동기 실행은 사용자 인터페이스를 차단하지 않습니다. 이 동작을 제어하려면 두 번째 인수로 의존성 배열을 사용하여 특정 값이 변경될 때만 실행을 제한할 수 있습니다.

## 15개 추가 질문 이용 가능

- useEffect에서 의존성 배열의 목적은 무엇인가요?
- useEffect에 의존성으로 빈 배열 []을 전달하는 것은 무엇을 의미하나요?

무료로 가입하기: https://sharpskill.dev/ko/login

## 기타 React / Next.js 면접 주제

- [JavaScript 기초](https://sharpskill.dev/ko/technologies/react-next/interview-questions/javascript-essentials.md): 25개 질문, Junior
- [React 기초](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-fundamentals.md): 20개 질문, Junior
- [React Hooks](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-hooks.md): 22개 질문, Junior
- [React Router](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-router.md): 20개 질문, Junior
- [Context를 활용한 상태 관리](https://sharpskill.dev/ko/technologies/react-next/interview-questions/state-management-context.md): 18개 질문, Junior
- [폼과 Controlled Components](https://sharpskill.dev/ko/technologies/react-next/interview-questions/forms-controlled-components.md): 20개 질문, Mid-Level
- [데이터 가져오기 및 API](https://sharpskill.dev/ko/technologies/react-next/interview-questions/fetching-data-api.md): 20개 질문, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-query-tanstack.md): 20개 질문, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/ko/technologies/react-next/interview-questions/styling-css-in-js.md): 18개 질문, Mid-Level
- [Next.js 기초](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-fundamentals.md): 25개 질문, Mid-Level
- [TypeScript와 React](https://sharpskill.dev/ko/technologies/react-next/interview-questions/typescript-react.md): 20개 질문, Mid-Level
- [Next.js 데이터 페칭](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-data-fetching.md): 24개 질문, Mid-Level
- [Next.js Server Actions](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-server-actions.md): 20개 질문, Mid-Level
- [Next.js 라우팅 및 내비게이션](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-routing-navigation.md): 22개 질문, Mid-Level
- [Next.js API Routes](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-api-routes.md): 20개 질문, Mid-Level
- [Next.js Metadata & SEO](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-metadata-seo.md): 18개 질문, Mid-Level
- [Next.js Middleware 및 Auth](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-middleware-auth.md): 22개 질문, Mid-Level
- [React 테스트](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-testing.md): 20개 질문, Mid-Level
- [Zustand State Management](https://sharpskill.dev/ko/technologies/react-next/interview-questions/zustand-state-management.md): 18개 질문, Mid-Level
- [React 성능 최적화](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-performance-optimization.md): 22개 질문, Senior
- [Error Boundaries & 에러 핸들링](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-error-boundaries.md): 18개 질문, Senior
- [Advanced React Patterns](https://sharpskill.dev/ko/technologies/react-next/interview-questions/advanced-react-patterns.md): 20개 질문, Senior
- [Next.js 고급 기능](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-advanced-features.md): 24개 질문, Senior
- [Next.js 배포 및 프로덕션](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-deployment-production.md): 20개 질문, Senior
- [아키텍처 & 디자인 패턴](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-architecture-patterns.md): 22개 질문, Senior
- [React Server Components](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-server-components.md): 26개 질문, Senior
- [Next.js 국제화](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-internationalization.md): 20개 질문, Senior
- [React 보안 & 모범 사례](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-security-best-practices.md): 22개 질문, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/ko/technologies/react-next/interview-questions/component-lifecycle