React Props로 데이터 전달하기

이번에는 React에서 컴포넌트에 데이터를 전달하는 방법인 Props에 대해 알아보겠습니다.

React는 하나의 페이지를 여러 개의 컴포넌트로 나누고, 이를 조합하여 화면을 만드는 방식으로 동작합니다.

마치 레고 블록을 여러 개 조립해서 하나의 완성된 결과물을 만드는 것과 비슷합니다.

이때 같은 형태의 컴포넌트라도 전달하는 데이터에 따라 서로 다른 화면을 보여줄 수 있습니다.

예를 들어 여러 개의 Button 컴포넌트가 있다고 가정해 보겠습니다.

[메일]

[카페]

[블로그]

각 버튼의 구조는 같지만 버튼마다 표시되는 텍스트나 색상은 다를 수 있습니다.

이처럼 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용하는 값을 React에서는 Props(Properties)라고 합니다.

1. Props란?

Props는 부모 컴포넌트가 자식 컴포넌트에게 전달하는 데이터입니다.

예를 들어 App 컴포넌트에서 Button 컴포넌트를 사용한다고 가정해 보겠습니다.

<Button text="메일" color="red" />

여기서 Button 컴포넌트에 전달한 값은 다음과 같습니다.

text: 메일
color: red

이 값들은 Button 컴포넌트에서 Props로 전달받을 수 있습니다.

컴포넌트 관계를 그림으로 표현하면 다음과 같습니다.

         부모 컴포넌트
             App
              │
              │ Props 전달
              ▼
         자식 컴포넌트
           Button

즉, Props를 이용하면 다음과 같이 데이터를 전달할 수 있습니다.

부모 컴포넌트 → 자식 컴포넌트

Props는 React에서 컴포넌트를 재사용할 수 있도록 해주는 핵심 기능 중 하나입니다.

2. Props는 객체 형태로 전달된다

컴포넌트에 여러 개의 Props를 전달하면 자식 컴포넌트에서는 이를 하나의 객체 형태로 받을 수 있습니다.

예를 들어 부모 컴포넌트에서 다음과 같이 작성합니다.

<Button text="메일" color="red" />

자식 컴포넌트에서는 props라는 매개변수로 전달받을 수 있습니다.

const Button = (props) => {
  console.log(props);

  return (
    <button style={{ color: props.color }}>
      {props.text} - {props.color}
    </button>
  );
};

export default Button;

console.log(props)를 출력하면 대략 다음과 같은 객체 형태를 확인할 수 있습니다.

{
  text: '메일',
  color: 'red'
}

따라서 각각의 값은 객체의 프로퍼티를 통해 사용할 수 있습니다.

props.text

props.color

3. 구조 분해 할당으로 Props 사용하기

매번 props.text, props.color처럼 작성할 수도 있지만, JavaScript의 구조 분해 할당을 사용하면 조금 더 간결하게 작성할 수 있습니다.

const Button = ({ text, color }) => {
  return (
    <button style={{ color: color }}>
      {text} - {color}
    </button>
  );
};

다음 코드는,

const Button = (props) => {
  const text = props.text;
  const color = props.color;
};

와 비슷한 의미입니다.

구조 분해 할당을 사용하면 필요한 Props를 바로 꺼내서 사용할 수 있습니다.

4. Props의 기본값 설정하기

Button 컴포넌트에 color를 전달하지 않았다고 가정해 보겠습니다.

<Button text="카페" />

이 경우 color는 undefined가 됩니다.

하지만 기본 색상을 지정해 두면 color를 전달하지 않았을 때 자동으로 기본값을 사용할 수 있습니다.

구조 분해 할당에서 다음과 같이 기본값을 설정합니다.

const Button = ({ text, color = 'black' }) => {
  return (
    <button style={{ color: color }}>
      {text} - {color.toUpperCase()}
    </button>
  );
};

이제 다음과 같이 color를 전달하면 전달한 값을 사용합니다.

<Button text="메일" color="red" />

결과는 다음과 같습니다.

메일 - RED

반면 color를 전달하지 않으면 기본값인 black이 사용됩니다.

<Button text="카페" />

결과는 다음과 같습니다.

카페 - BLACK

참고: 기존의 defaultProps 방식

과거에는 함수 컴포넌트의 기본 Props를 다음과 같이 설정하기도 했습니다.

Button.defaultProps = {
  color: 'black',
};

하지만 현재 함수 컴포넌트에서는 JavaScript의 기본 매개변수와 구조 분해 할당을 사용하는 방식이 일반적입니다.

따라서 다음과 같이 작성하는 것이 간단합니다.

const Button = ({ color = 'black' }) => {
  // ...
};

5. 여러 개의 Props를 전달하기

부모 컴포넌트에서 여러 개의 Button을 사용할 수 있습니다.

App.jsx를 다음과 같이 작성해 보겠습니다.

import Button from './components/Button';

function App() {
  return (
    <>
      <Button text="메일" color="red" />
      <Button text="카페" />
      <Button text="블로그" color="blue" />
    </>
  );
}

export default App;

모든 컴포넌트는 동일한 Button 컴포넌트를 사용하지만 전달되는 Props에 따라 서로 다르게 표시됩니다.

메일 - RED
카페 - BLACK
블로그 - BLUE

즉, 하나의 컴포넌트를 만들어 두고 Props만 다르게 전달하면 여러 상황에서 재사용할 수 있습니다.

이것이 React 컴포넌트를 사용하는 큰 장점 중 하나입니다.

6. Spread 연산자로 Props 전달하기

Props가 많아지면 하나씩 전달하는 것이 번거로울 수 있습니다.

예를 들어 다음과 같은 객체가 있다고 가정해 보겠습니다.

const buttonProps = {
  text: '메일',
  color: 'red',
  a: 1,
  b: 2,
  c: 3,
};

이 객체의 값을 하나씩 전달하면 다음과 같이 작성해야 합니다.

<Button
  text={buttonProps.text}
  color={buttonProps.color}
  a={buttonProps.a}
  b={buttonProps.b}
  c={buttonProps.c}
/>

이때 **Spread 연산자(...)**를 사용할 수 있습니다.

<Button {...buttonProps} />

객체의 프로퍼티가 각각 Props로 전달됩니다.

즉, 위 코드는 다음과 같은 의미입니다.

<Button
  text="메일"
  color="red"
  a={1}
  b={2}
  c={3}
/>

Spread 연산자 사용 예제

App.jsx를 다음과 같이 작성할 수 있습니다.

import Button from './components/Button';

function App() {
  const buttonProps = {
    text: '메일',
    color: 'red',
    a: 1,
    b: 2,
    c: 3,
  };

  return (
    <>
      <Button {...buttonProps} />
      <Button text="카페" />
    </>
  );
}

export default App;

buttonProps 객체에 있는 값들이 Button 컴포넌트의 Props로 전달됩니다.

다만 실제로 컴포넌트에서 사용하지 않는 Props까지 무조건 전달하는 방식은 피하는 것이 좋습니다.

필요한 데이터가 명확할 때 사용하는 것이 코드의 가독성과 유지보수에 도움이 됩니다.

7. 컴포넌트 사이에 작성한 요소도 전달할 수 있다

Props는 태그의 속성으로 전달하는 값만 있는 것이 아닙니다.

컴포넌트의 시작 태그와 종료 태그 사이에 작성한 요소도 전달할 수 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.

<Button text="블로그">
  <Header />
  <div>자식 요소</div>
</Button>

Button 태그 사이에 작성된 요소는 특별한 Props인 **children**으로 전달됩니다.

children 사용하기

Button 컴포넌트에서 children을 전달받습니다.

const Button = ({ children, text, color = 'black' }) => {
  return (
    <button style={{ color: color }}>
      {text} - {color.toUpperCase()}
      {children}
    </button>
  );
};

export default Button;

이제 Button 컴포넌트 내부의 {children} 위치에 부모에서 전달한 내용이 렌더링됩니다.

예를 들어,

<Button text="블로그">
  <Header />
  <div>자식 요소</div>
</Button>

다음 부분이,

<Header />
<div>자식 요소</div>

children으로 전달됩니다.

그리고 Button 내부에서 다음 코드가 이를 화면에 표시합니다.

{children}

8. Props와 children의 관계

Props와 children을 함께 사용하면 다음과 같은 구조가 됩니다.

App
 │
 ├── text, color ──────────────┐
 │                              ▼
 │                          Button
 │                              │
 │
 └── <Header />, <div> ──── children
                                │
                                ▼
                             화면 렌더링

예를 들어 다음과 같습니다.

<Button text="블로그" color="blue">
  <Header />
  <div>자식 요소</div>
</Button>

전달되는 Props를 객체 형태로 생각하면 대략 다음과 같습니다.

{
  text: '블로그',
  color: 'blue',
  children: [
    <Header />,
    <div>자식 요소</div>,
  ],
}

실제 React 내부 구조를 그대로 표현한 것은 아니지만, text, color와 마찬가지로 children도 컴포넌트가 전달받는 Props라는 개념으로 이해하면 됩니다.

9. 전체 코드 정리

App.jsx

import Button from './components/Button';
import Header from './components/Header';

function App() {
  const buttonProps = {
    text: '메일',
    color: 'red',
    a: 1,
    b: 2,
    c: 3,
  };

  return (
    <>
      <Button {...buttonProps} />

      <Button text="카페" />

      <Button text="블로그">
        <Header />
        <div>자식 요소</div>
      </Button>
    </>
  );
}

export default App;

Button.jsx

const Button = ({ children, text, color = 'black' }) => {
  return (
    <button style={{ color: color }}>
      {text} - {color.toUpperCase()}
      {children}
    </button>
  );
};

export default Button;

마무리

이번에는 React에서 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 Props에 대해 알아보았습니다.

정리하면 다음과 같습니다.

Props는 부모 컴포넌트에서 자식 컴포넌트로 전달하는 데이터이다.
자식 컴포넌트에서는 Props를 객체 형태로 전달받을 수 있다.
props.text와 같이 객체의 프로퍼티를 이용할 수 있다.
구조 분해 할당을 사용하면 Props를 간결하게 사용할 수 있다.
구조 분해 할당에서 기본값을 지정할 수 있다.
Spread 연산자(...)를 이용하면 객체의 값을 한 번에 Props로 전달할 수 있다.
컴포넌트 태그 사이에 작성한 요소는 children Props로 전달된다.
자식 컴포넌트에서는 {children}을 통해 전달받은 요소를 렌더링할 수 있다.

React에서는 하나의 컴포넌트를 만들어 두고 Props를 다르게 전달함으로써 다양한 형태의 UI를 만들 수 있습니다.

예를 들어 하나의 Button 컴포넌트를 만들어도 Props에 따라 서로 다른 버튼을 만들 수 있습니다.

<Button text="메일" color="red" />
<Button text="카페" color="green" />
<Button text="블로그" color="blue" />

이처럼 컴포넌트를 재사용하고, 필요한 데이터를 Props로 전달하는 것은 React의 매우 중요한 개발 방식입니다.

다음 단계에서는 Props와 함께 자주 사용되는 State(상태)를 이용해 사용자 동작에 따라 화면을 변경하는 방법을 알아보겠습니다.

저작자표시 비영리 변경금지 (새창열림)

[React] React Props로 데이터 전달하기

React Props로 데이터 전달하기

1. Props란?

2. Props는 객체 형태로 전달된다

3. 구조 분해 할당으로 Props 사용하기

4. Props의 기본값 설정하기

참고: 기존의 defaultProps 방식

5. 여러 개의 Props를 전달하기

6. Spread 연산자로 Props 전달하기

Spread 연산자 사용 예제

7. 컴포넌트 사이에 작성한 요소도 전달할 수 있다

children 사용하기

8. Props와 children의 관계

9. 전체 코드 정리

App.jsx

Button.jsx

마무리

티스토리툴바