React에서 기능이 있는 컴포넌트 목록

Context 관련 기능 컴포넌트

Provider

• Context value 공급
• 트리 아래로 값 전파

Consumer

• Provider에서 준 값 읽어오기 (useContext 나오기 전 방식)

---

라우팅 기능 컴포넌트 (React Router)

이건 화면 이동/페이지 전환 라우팅 담당.

BrowserRouter / HashRouter

• 전체 앱에 라우팅 기능 제공
• 내부에서 History API 관리

Routes / Route

• 특정 경로에 어떤 컴포넌트를 보여줄지 결정

Link

• a 태그 대신 history.push 관리

이 컴포넌트들도 모두 “기능이 붙은 컴포넌트”

---

애니메이션/트랜지션 기능 컴포넌트

AnimatePresence, motion.div (Framer Motion)

• mount/unmount 애니메이션
• layout animation
• variants 관리

Transition (Headless UI / Radix)

• 사라질 때 transition주는 UI 컴포넌트

---

상태 관리 라이브러리 컴포넌트

Redux <Provider store={...}>

• Redux state를 React 트리에 연결함

Recoil <RecoilRoot>

• Recoil atom/store 관리

Zustand <Provider> (옵션)

이것도 기능이 있음 (상태 저장소 연결)

---

제어 기능이 있는 구조형 컴포넌트

ErrorBoundary

• 자식 컴포넌트에서 에러 발생하면 fallback UI 보여줌

Suspense

• Promise-based 로딩을 처리
• lazy-loaded 컴포넌트 기다리는 동안 fallback 띄움

Fragment

• DOM 안 만들고 레이아웃만 묶음

---

제공 컴포넌트(HOC 스타일 기능)

ThemeProvider

• Emotion / Styled-components의 테마 제공 기능

QueryClientProvider

• React Query 전역 Client 제공

ApolloProvider

• GraphQL Client 제공

---

Portal 컴포넌트

<Portal> (Radix UI 등)

• 렌더 트리 밖으로 DOM을 보내버리는 기능
• 모달, 토스트, 바텀시트에서 필수

---

UI 라이브러리 기능 컴포넌트

Modal, Dialog, Tooltip, Dropdown 등

Radix / HeadlessUI / MUI / Chakra UI 등의 기능성 컴포넌트들.

이들 대부분은 내부적으로:

• focus trap
• keyboard navigation
• ARIA accessibility
• 이벤트 관리

같은 기능이 들어 있음.

---

그럼 “기능이 있는 컴포넌트”의 정의는?

React 컴포넌트 중에서:

• UI만 리턴하는 단순한 컴포넌트가 아니라
• React의 트리/상태/컨텍스트/라우터/에러/애니메이션과 연동되는 역할을 가진 컴포넌트

이걸 “기능이 있는 컴포넌트”라고 부르면 딱