Question 1

Custom Hook을 만드는 이유와 규칙을 설명해주세요.

Accepted Answer

Custom Hook은 **컴포넌트 로직을 재사용 가능한 함수로 추출하는 패턴**입니다. `use`로 시작하는 이름을 가진 함수 안에서 다른 Hook을 조합해, 상태와 관련된 로직을 컴포넌트 밖으로 분리합니다.

### **왜 만드는가**

여러 컴포넌트에서 같은 로직 — 데이터 패칭, 이벤트 구독, 폼 상태 관리 — 이 반복될 때, 그 로직을 Custom Hook으로 추출하면 **컴포넌트는 "무엇을 하는지"만 남고 "어떻게 하는지"는 Hook 안에 캡슐화**됩니다.

예를 들어 API 패칭 로직을 `useFetch`로 추출하면, 로딩·에러·데이터 상태 관리와 요청 취소 처리를 한 곳에 두고 여러 컴포넌트가 한 줄로 가져다 쓸 수 있습니다.

### **Hook의 규칙**

- **최상위에서만 호출**합니다. 반복문·조건문·중첩 함수 안에서 호출하면 렌더링마다 Hook의 호출 순서가 달라져 React가 상태를 잘못 연결합니다.
- **React 함수 컴포넌트 또는 다른 Custom

Question 2

Compound Components 패턴을 설명하고 구현 예시를 보여주세요.

Accepted Answer

Compound Components는 **여러 컴포넌트가 암묵적으로 상태를 공유하면서 하나의 UI 단위를 구성**하는 패턴입니다. HTML의 `select`와 `option`처럼, 부모와 자식이 세트로 동작하는 관계를 React로 표현한 것입니다.

### **어떤 모양인가**

셀렉트 박스를 예로 들면, `Select`가 최상위에 있고 그 아래 `Select.Trigger`, `Select.Options`, `Select.Option`을 사용자가 **원하는 구조로 직접 배치**합니다. 열림 상태나 선택값 같은 내부 상태는 부모가 갖고, 자식들은 그것을 암묵적으로 공유받습니다.

### **어떻게 구현하는가**

핵심은 **Context**입니다.

- 부모 컴포넌트가 상태(열림 여부, 선택값, 변경 함수)를 만들어 Context Provider로 감쌉니다.
- 각 서브 컴포넌트는 `useContext`로 그 상태를 꺼내 씁니다 — Trigger는 열림 토글, Option은 선택 처

Question 3

리액트 18 버전에 도입된 동시성 기능을 설명할 수 있나요?

Accepted Answer

React 18의 동시성(Concurrency)은 **렌더링을 중단·재개·폐기할 수 있게 만든 렌더러의 근본적인 변화**입니다. 여러 작업을 물리적으로 동시에 실행하는 것이 아니라(JS는 여전히 싱글 스레드), **렌더링에 우선순위를 두고 급한 일이 오면 하던 렌더를 양보**하는 방식입니다.

### **이전과 무엇이 다른가**

기존(Legacy) 모드에서 렌더링은 한번 시작하면 끝까지 **중단할 수 없었습니다.** 큰 트리를 렌더하는 동안 사용자 입력이 밀렸습니다. Concurrent 모드에서는 렌더 도중 더 급한 업데이트가 들어오면 **진행 중인 작업을 버리고 급한 것부터** 처리합니다.

### **핵심 기능**

- **useTransition** — 상태 업데이트를 감싸 "급하지 않다"고 표시합니다. 무거운 목록 갱신 때문에 입력이 버벅이는 문제를 해결하고, isPending으로 지연 상태를 표시할 수 있습니다.
- **useDeferredValue** — 값의 지연된 사

React

01Custom Hook을 만드는 이유와 규칙을 설명해주세요.어려움Hooks

02Compound Components 패턴을 설명하고 구현 예시를 보여주세요.어려움패턴

03리액트 18 버전에 도입된 동시성 기능을 설명할 수 있나요?어려움렌더링