개발/React

[React] Component와 Props

firsthg 2026. 9. 14. 15:48

머릿말: "React에서는 UI를 작은 컴포넌트로 나누고, Props로 데이터를 내려준다."

 

Step 1. 컴포넌트

React에서는 화면 전체를 하나의 거대한 코드로 작성하기보다, 작은 UI 조각으로 나눈다.

 

예를 들어 이런 화면이 있다고 해보자.

홍길동
프론트엔드 개발자

김철수
백엔드 개발자

이영희
디자이너

이걸 그대로 그냥 코드로 작성하면 다음과 같이 작성할 수 있다.

function App() {
  return (
    <div>
      <h2>홍길동</h2>
      <p>프론트엔드 개발자</p>

      <h2>김철수</h2>
      <p>백엔드 개발자</p>

      <h2>이영희</h2>
      <p>디자이너</p>
    </div>
  );
}

export default App;

동작은 하지만 같은 형태가 반복된다는 문제가 있다.

<h2>...</h2>
<p>...</p>

 

이때 React에서는 이것을 하나의 컴포넌트로 분리한다.

function User() {
  return (
    <div>
      <h2>홍길동</h2>
      <p>프론트엔드 개발자</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <User />
      <User />
      <User />
    </div>
  );
}

export default App;

여기서 중요한 부분은

<User />

으로 이 코드를 쉽게 말하자면 "User 컴포넌트를 여기에 보여줘"라는 뜻이다.

 

Step 2. 컴포넌트는 직접 만든 HTML 태그처럼 사용할 수 있다.

원래 HTML에는 이런 태그들이 있다.

<h1>Hello</h1>
<p>Hello</p>
<button>Click</button>

 

React에서는 개발자가 직접 태그 비슷한 것을 만들 수 있다.

<User />
<Profile />
<Product />

실제로는 태그가 아니라 React 컴포넌트이다.

 

그리고 여기서 주의할 점은 컴포넌트 이름은 반드시 대문자로 시작해야 한다.

 

왜냐하면, 컴포넌트 이름이 소문자로 시작하면 React가 일반 HTML 태그처럼 해석할 수 있기 때문에 피해야 한다.

 

그리고 또 위에 있는 코드를 다시 보면 문제가 하나 있다.

function User() {
  return (
    <div>
      <h2>홍길동</h2>
      <p>프론트엔드 개발자</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <User />
      <User />
      <User />
    </div>
  );
}

export default App;

해당 코드를 실행하면 결과는

홍길동
프론트엔드 개발자

홍길동
프론트엔드 개발자

홍길동
프론트엔드 개발자

이다.

 

개발자가 원하는 건 각각 다른 값을 넣는 것이다.

홍길동 → 프론트엔드 개발자
김철수 → 백엔드 개발자
이영희 → 디자이너

이때 사용하는 것이 Props이다.

 

Step 3. Props

Props는 부모 컴포넌트가 자식 컴포넌트에게 전달하는 값이다.

 

HTML로 생각해 보면

<img src="cat.jpg" />

여기서

src="cat.jpg"

라는 값을 img에게 전달하고 있다.

 

React 컴포넌트도 이와 비슷하다.

<User name="홍길동" job="프론트엔드 개발자" />

에서 

name="홍길동"
job="프론트엔드 개발자"

을 User 컴포넌트에게 전달하고 있다.

 

User 컴포넌트에서는 다음과 같이 받을 수 있다.

function User(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>{props.job}</p>
    </div>
  );
}

 

전체 코드는 다음과 같다.

function User(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>{props.job}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <User name="홍길동" job="프론트엔드 개발자" />
      <User name="김철수" job="백엔드 개발자" />
      <User name="이영희" job="디자이너" />
    </div>
  );
}

export default App;

브라우저를 통해 확인해 보면 다음과 같다.

이제 값만 바꾸면서 UI 구조를 재사용할 수 있다.

 

Props가 전달되는 흐름

App
 ↓
User

부모
 ↓
자식

여기서 App이 부모 컴포넌트이고 User가 자식 컴포넌트이다.

 

그리도 데이터는

App
 │
 │ name="홍길동"
 │ job="프론트엔드 개발자"
 ↓
User

처럼 내려간다.

 

즉, Props는 부모가 자식에게 데이터를 전달하는 수단(메커니즘)이다.

 

props의 실제 모습

다음 코드를 살펴보면

<User name="홍길동" job="프론트엔드 개발자" />

 

React 입장에서 User 컴포넌트는 이런 값을 전달받는다고 생각하면 된다.

{ name: "홍길동", job: "프론트엔드 개발자" }

 

즉, props는 그냥 JavaScript 객체이다.

 

Step 4. 구조 분해 할당

React 코드는 보통 다음과 같이 작성된다.

function User({ name, job }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>{job}</p>
    </div>
  );
}

JavaScript의 구조 분해 문법을 사용한 것으로 이전의 코드와 완전히 동일하다.

 

function User(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>{props.job}</p>
    </div>
  );
}

 

 

핵심 정리

  • Component : 재사용할 수 있는 UI 조각
  • Props : 부모 컴포넌트가 자식 컴포넌트에게 전달하는 값
  • 데이터 흐름 : 부모 → 자식

 

그리고 이 코드를 보고

function User({ name }) {
  return <h1>{name}</h1>;
}

function App() {
  return <User name="홍길동" />;
}

 

다음과 같이 자연스럽게 읽을 수 있으면 이번 단계의 핵심을 이해한 것이다.

  1. App이 User에게 name이라는 props로 "홍길동"을 전달한다.
  2. User는 받은 name을 화면에 보여준다.