Component가 뭔가요?

React에서 ‘컴포넌트(Component)’란?

UI를 만들어내는 “React 전용 함수”

React 컴포넌트 = 함수다. (하지만 함수와는 차이가 있음 이하 서술)
그리고 그 함수가 UI(엘리먼트)를 반환하면 그것을 “컴포넌트”라고 부름.

정의하면 이거야:

컴포넌트는 입력(props)을 받아서 UI(React element)를 JSX로 반환하는 특별한 함수다.

 

function Button({ text }) {
  return <button>{text}</button>;
}

이 한 덩어리가 “컴포넌트”.

React는 이 함수를 호출해서 그림(엘리먼트) 을 만듦.

 

컴포넌트는 React가 “Fiber”로 관리하는 단위

이게 중요함.

React는 화면을 이렇게 관리함:

 

JSX → 컴포넌트 함수 → 엘리먼트 → Fiber 노드 → DOM 반영

 

즉,

• 컴포넌트 하나당 하나의 Fiber 노드가 만들어짐
• 이 Fiber 노드가 부모-자식-형제 구조를 이루어 UI 트리를 만듦
• 상태가 바뀌면 해당 컴포넌트의 Fiber를 다시 실행(render)

그래서 컴포넌트는 단순 JS 함수가 아니라,
React의 렌더링 시스템 안에서 살아 움직이는 존재임.

---

컴포넌트 = UI를 조각으로 나눈 최소 단위

React에서는 화면을 이렇게 나눔:

Header
Sidebar
Content
Button
Modal

 

하나의 큰 UI를 작은 컴포넌트로 쪼개서 관리하는 거지.

컴포넌트가 없다면?
한 파일에 모든 UI를 때려 넣어야 해서 유지보수가 불가능함.

컴포넌트 = React Fiber의 단위

React 내부에서 실제 트리가 만들어질 때:

AppFiber
ProviderFiber
ButtonFiber
ModalFiber
...

 

이런 식으로 각 컴포넌트마다 개별 Fiber node가 생성됨.

---

컴포넌트는 상태(state)와 훅(hooks)을 가질 수 있음

함수와 컴포넌트를 구별하는 핵심 포인트.

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

 

그냥 JS 함수에서는 상태 못씀.
컴포넌트니까 가능한 것.

---

그럼 Provider도 컴포넌트냐?

맞아. Provider도 컴포넌트다.

React가 제공하는 특별한 컴포넌트일 뿐이다.

<ThemeContext.Provider value="dark">
  <App />
</ThemeContext.Provider>

 

Provider도 결국:

• Fiber 노드가 만들어지고
• 자식과 부모 관계가 생기고
• Context value를 트리 아래로 전달하는 역할을 갖는 컴포넌트

즉,
Provider는 그냥 기능이 있는 컴포넌트다
(상태 공급 역할 수행)

기능이 있는 다른 컴포넌트 예시 보기

 

결론적으로 React 컴포넌트는 UI와 상태를 함수처럼 재사용하기 위한 최소 단위

컴포넌트란 JSX를 반환하는 함수이며, React 앱의 UI를 이루는 최소 단위다. Provider도 그냥 컴포넌트다.