리액트 props 사용법: 부모에서 자식으로 데이터 전달하기

리액트 props 사용법: 부모에서 자식으로 데이터 전달하기

props는 부모 컴포넌트가 자식 컴포넌트로 값을 전달하는 표준 방법입니다. 이 글에서는 props 기본 문법, props.children으로 래핑된 콘텐츠 전달하기, 기본값 설정(ES6 기본 매개변수 · defaultProps)까지 예제와 함께 알아봅니다. “props는 읽기 전용(read-only)”이라는 원칙을 꼭 기억하세요.

1. props 기본 문법

부모는 JSX 속성 형태로 값을 전달하고, 자식은 props 객체(또는 구조 분해 할당)로 수신합니다.

// Parent.jsx
import React from 'react';
import Child from './Child';

export default function Parent() {
  const user = { name: 'BlueShare', role: 'Admin' };
  const count = 3;
  const handleGreet = () => alert('Hello!');

  return (
    <div>
      <h2>부모 컴포넌트</h2>
      <Child
        title="대시보드"
        count={count}
        user={user}
        onGreet={handleGreet}
      />
    </div>
  );
}

// Child.jsx
import React from 'react';

// 방법 A) props 객체 사용
// export default function Child(props) {
//   return (
//     <div>
//       <h3>{props.title}</h3>
//       <p>알림 {props.count}개</p>
//       <p>사용자: {props.user.name} ({props.user.role})</p>
//       <button onClick={props.onGreet}>인사하기</button>
//     </div>
//   );
// }

// 방법 B) 구조 분해 할당(권장)
export default function Child({ title, count, user, onGreet }) {
  return (
    <div>
      <h3>{title}</h3>
      <p>알림 {count}개</p>
      <p>사용자: {user.name} ({user.role})</p>
      <button onClick={onGreet}>인사하기</button>
    </div>
  );
}

✅ 팁: 객체/배열을 넘길 땐 {'{…obj}'}처럼 중괄호로 JS 표현식을 사용합니다. 이벤트 콜백은 onClick={fn} 형태로 전달하세요.

2. props.children 사용법

props.children은 태그 사이에 작성한 모든 JSX를 자식이 “슬롯”처럼 받아서 렌더링할 때 사용합니다. 공통 레이아웃·카드 UI에 유용합니다.

// Card.jsx
import React from 'react';

export default function Card({ heading, children }) {
  const cardStyle = {
    border: '1px solid #ddd',
    borderRadius: '12px',
    padding: '16px',
    backgroundColor: '#fafafa',
    margin: '12px 0'
  };
  return (
    <section style={cardStyle}>
      <h3>{heading}</h3>
      {children} {/* 이 자리에 전달된 JSX가 표시됨 */}
    </section>
  );
}

// 사용 예시 (Parent.jsx 일부)
<Card heading="공지">
  <p>이번 주 예정된 점검이 있습니다.</p>
  <button>자세히 보기</button>
</Card>

✅ 팁: children은 단일 노드, 배열, 문자열 등 다양한 타입이 올 수 있습니다. 필요하면 React.Children.map 등 유틸을 활용하세요.

3. 기본값 설정 (ES6 기본 매개변수 · defaultProps)

권장되는 방법은 ES6 기본 매개변수 또는 구조 분해 할당의 기본값입니다. 함수형 컴포넌트에서 가장 간단하고 직관적입니다.

// ES6 기본 매개변수 (권장)
function Welcome({ name = '게스트', theme = 'light' }) {
  return <p>{name}님, {theme} 테마로 접속 중입니다.</p>;
}

// 중첩 객체 기본값도 가능
function Profile({ user = { name: 'Unknown', age: 0 } }) {
  const { name, age } = user;
  return <p>{name} / {age}</p>;
}

defaultProps는 함수형 컴포넌트에서도 동작하지만, 최신 코드에서는 ES6 기본값을 더 선호합니다. 클래스 컴포넌트에서는 여전히 많이 사용합니다.

// defaultProps 사용 예 (함수형도 동작하나 신규 코드에서는 ES6 권장)
function Notice({ message, level }) {
  return <p>[{level}] {message}</p>;
}
Notice.defaultProps = {
  message: '안내 메시지가 없습니다.',
  level: 'INFO'
};

// 클래스 컴포넌트 예시
import React, { Component } from 'react';
class Button extends Component {
  static defaultProps = {
    label: 'Click',
    type: 'button'
  };
  render() {
    const { label, type } = this.props;
    return <button type={type}>{label}</button>;
  }
}

✅ 체크리스트

  • props는 읽기 전용입니다(자식에서 수정 금지).
  • 구조 분해 + 기본값으로 필수/선택 props를 명확히 표현하세요.
  • 필요 시 PropTypes 또는 TS(타입스크립트)로 타입을 지정하세요.

4. 예제 JSX 코드

아래 예제는 기본 문법 + children + 기본값을 한 파일에서 확인할 수 있도록 구성했습니다.

import React from 'react';

// Card: children과 스타일 예시
function Card({ heading = '제목 없음', children }) {
  const box = { border:'1px solid #e5e5e5', padding:'12px', borderRadius:'10px', margin:'10px 0' };
  return (
    <section style={box}>
      <h3>{heading}</h3>
      {children}
    </section>
  );
}

// Info: ES6 기본 매개변수로 기본값 제공
function Info({ name = '게스트', count = 0, onHello = () => alert('안녕!') }) {
  return (
    <div>
      <p>{name}님 환영합니다. 알림 {count}개.</p>
      <button onClick={onHello}>인사하기</button>
    </div>
  );
}

// 통합 Parent
export default function PropsDemo() {
  const user = { name: 'BlueShare', role: 'Admin' };
  const greet = () => alert(`Hello, ${user.name}!`);

  return (
    <div style={{ padding:'16px' }}>
      <h2>props 통합 예제</h2>

      {/* 기본 문법: 다양한 타입의 props 전달 */}
      <Info name={user.name} count={3} onHello={greet} />

      {/* children: 래핑된 콘텐츠 전달 */}
      <Card heading="공지">
        <p>이번 주 시스템 점검이 예정되어 있습니다.</p>
        <button>자세히 보기</button>
      </Card>

      {/* 기본값 동작 확인: name, count, onHello 미전달 */}
      <Card heading="기본값 테스트">
        <Info />
      </Card>
    </div>
  );
}

▼ 실행 결과 화면

리액트 props 사용법 예제 코드 실행 결과 화면
▶ 실행하기: props 통합 예제
💾 소스 보기: PropsDemo.jsx

마무리

props는 부모 → 자식 단방향 데이터 흐름을 구현하는 핵심 도구입니다. 실전에서는 구조 분해 + 기본값 패턴으로 안전하게 렌더링하고, children으로 재사용 가능한 레이아웃을 설계하세요. 상태를 올려서 공유해야 한다면(형제 간 값 공유 등) 상태 끌어올리기(lifting state up) 또는 전역 상태 관리를 고려하면 좋습니다.

참고 링크

함께 보면 좋은 게시글

이 글이 도움이 되셨다면 공유 부탁 드립니다.

동일 카테고리 게시글

위로 스크롤