컴포넌트의 유형

컴포넌트를 볼때 눈에 뜨는 게 값전달 하는 props 인데 

그럼 컴포넌트를 정의할 때 pops의 기반인지 아닌지가 중요한가? 

 

 

props를 받는 컴포넌트 (pops는 데이터 표현이 핵심)

 

1️⃣ 먼저 “props 기반 컴포넌트”가 뭔지 정확히 하자

네 말이 맞다.

<UserCard name="훈" age={30} />

이건:

• 외부에서 값이 주어지고
• 그 값에 따라 결과가 달라지고
• 내부는 비교적 중립적인

입력(props) → 출력(UI) 구조다.

이런 컴포넌트를 보통:

• Presentational Component
• Dumb Component
• Pure Component (개념적으로)

라고 부른다.

---

2️⃣ 그럼 props 기반이 “아닌” 컴포넌트는 뭐냐

🔥 핵심 결론

“외부 입력 없이 스스로 결정하는 컴포넌트”

이런 애들이 있다. 꽤 많다.

---

3️⃣ props가 거의 없는 컴포넌트들

1️⃣ 상태 기반 컴포넌트 (Self-contained)

 

function Toggle() {
  const [on, setOn] = useState(false);

  return (
    <button onClick={() => setOn(!on)}>
      {on ? 'ON' : 'OFF'}
    </button>
  );
}

• props 없음
• 내부 상태가 전부
• 외부에서는 존재만 신경 씀

 

<Toggle />

👉 이건 props 기반이 아니다.
→ 상태 기반 컴포넌트

---

2️⃣ 환경 의존 컴포넌트 (Context / Hook 의존)

 

function ThemeSwitcher() {
  const theme = useTheme(); // Context에서 가져옴

  return <div className={theme}>...</div>;
}

• props 없이 동작
• 전역 상태, 환경에 의존

👉 Context 기반 컴포넌트

---

3️⃣ 행동 중심 컴포넌트 (Action Component)

 

function LogoutButton() {
  const logout = useLogout();

  return <button onClick={logout}>로그아웃</button>;
}

• 보여주는 데이터보다
• “행동”이 핵심

👉 이건 UI라기보다는 트리거

---

4️⃣ props는 받지만 “props 기반이라고 부르기 애매한” 경우

이 부분이 진짜 중요하다.

예제

function Modal({ open }) {
  if (!open) return null;
  return <div className="modal">...</div>;
}

• props는 있지만
• 역할은 “보여줄지 말지” 결정
• 데이터 표현이 핵심이 아님

👉 컨트롤 컴포넌트

---

5️⃣ 반대로 props 기반 컴포넌트의 전형

 

function UserProfile({ user }) {
  return (
    <>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </>
  );
}

• 내부 상태 없음
• side-effect 없음
• 동일한 props → 동일한 결과

👉 이런 게 진짜 props 기반 컴포넌트

---

6️⃣ 실무에서 쓰는 사고 기준

컴포넌트를 설계할 때 이런 질문을 던진다.

1. 이 컴포넌트는 외부 데이터에 의해 그려지는가?
2. 아니면 스스로 상태와 결정을 가지는가?
3. 이 컴포넌트의 역할은 표현인가, 제어인가, 행동인가?

이 질문에 따라 분류가 갈린다.

---

7️⃣ Tabs 예제로 다시 돌아오면

Tabs 컴포넌트

 

<Tabs tabs={tabs} />

• props 기반 ❌ + 상태 기반 ⭕
• 외부로부터 구조를 받고
• 내부에서 activeTab 상태를 관리

👉 혼합형 컴포넌트

---

tabs.content 안의 JSX

• props 없음
• 상태 없음
• 그냥 내용

👉 컴포넌트도 아님
→ 단순 JSX 조각

---

8️⃣ 그래서 이 질문의 진짜 답

“props 기반 컴포넌트가 아닌 것도 있냐?”

정답:

있다. 그리고 오히려 많다.

• 상태 기반
• 컨텍스트 기반
• 행동 중심
• 컨트롤 컴포넌트
• 레이아웃 전용 컴포넌트

---

한 문장으로 요약

React 컴포넌트는
“props를 받느냐”가 아니라
“무엇을 책임지느냐”로 분류해야 한다.

이 관점이 생기면
컴포넌트 분할이 갑자기 훨씬 덜 고민스럽다.