React Props의 기본 사용법: 컴포넌트 간 데이터 전달의 핵심

 

React는 컴포넌트 기반의 UI 라이브러리로, 각 컴포넌트는 독립적이고 재사용 가능한 단위입니다. 컴포넌트 간 데이터를 주고받을 때 중요한 역할을 하는 것이 바로 props입니다. props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하기 위해 사용되며, **immutable(변경 불가능)**한 특징을 가지고 있습니다. 이 글에서는 React의 props를 사용하는 방법과 기본적인 개념을 다양한 예제를 통해 살펴보겠습니다.

---

1. Props란 무엇인가?

props는 properties의 줄임말로, 컴포넌트 외부에서 전달받는 입력값입니다. React에서 props는 다음과 같은 특징을 가집니다:

1. 읽기 전용: props는 부모 컴포넌트에서 자식 컴포넌트로 단방향 데이터 흐름으로 전달되며, 자식 컴포넌트에서 직접 수정할 수 없습니다.
2. 재사용 가능성: props를 활용하면 동일한 컴포넌트를 다양한 데이터와 함께 재사용할 수 있습니다.
3. 객체 형태: props는 기본적으로 객체 형태로 전달됩니다.

---

2. 기본적인 Props 전달 방법

React에서 props를 사용하는 가장 기본적인 방법은 컴포넌트에 속성(attribute) 형태로 데이터를 전달하는 것입니다. 아래 예제를 통해 기본적인 사용법을 살펴봅시다.

예제: 부모와 자식 컴포넌트 간의 데이터 전달

import React from "react";

// 자식 컴포넌트 정의
function Greeting(props) {
  return <h1>안녕하세요, {props.name}님!</h1>;
}

// 부모 컴포넌트 정의
function App() {
  return <Greeting name="철수" />;
}

export default App;

설명:

1. 부모 컴포넌트인 App에서 Greeting 컴포넌트로 name="철수"라는 props를 전달합니다.
2. 자식 컴포넌트 Greeting은 props.name을 통해 해당 데이터를 받아 화면에 출력합니다.

---

3. 여러 개의 Props 전달

여러 데이터를 한 번에 전달할 수도 있습니다. props를 객체 형태로 전달한다는 점을 활용하면 여러 속성을 쉽게 다룰 수 있습니다.

예제: 여러 props 전달하기

import React from "react";

function Profile(props) {
  return (
    <div>
      <h2>이름: {props.name}</h2>
      <p>나이: {props.age}</p>
      <p>취미: {props.hobby}</p>
    </div>
  );
}

function App() {
  return <Profile name="영희" age={25} hobby="독서" />;
}

export default App;

결과:

이름: 영희
나이: 25
취미: 독서

---

4. Props의 기본값 설정

React에서는 props가 전달되지 않을 경우를 대비해 기본값을 설정할 수 있습니다. 기본값 설정은 defaultProps를 사용하여 간단히 구현 가능합니다.

예제: 기본값 설정

import React from "react";

function Greeting(props) {
  return <h1>안녕하세요, {props.name}님!</h1>;
}

Greeting.defaultProps = {
  name: "게스트",
};

function App() {
  return <Greeting />;
}

export default App;

설명:
위 예제에서 Greeting 컴포넌트에 name props가 전달되지 않으면, 기본값으로 "게스트"가 출력됩니다.

---

5. Props의 타입 검증

React에서는 PropTypes 라이브러리를 사용해 props의 타입을 검증할 수 있습니다. 이를 통해 컴포넌트가 예상치 못한 데이터로 인해 오작동하는 것을 방지할 수 있습니다.

예제: PropTypes를 사용한 타입 검증

import React from "react";
import PropTypes from "prop-types";

function Profile(props) {
  return (
    <div>
      <h2>이름: {props.name}</h2>
      <p>나이: {props.age}</p>
    </div>
  );
}

Profile.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
};

function App() {
  return <Profile name="민수" age={30} />;
}

export default App;

설명:

• PropTypes.string.isRequired는 name이 문자열이어야 하며 필수 값임을 의미합니다.
• PropTypes.number.isRequired는 age가 숫자여야 함을 명시합니다.

---

6. Props를 활용한 컴포넌트 재사용성 증대

props를 활용하면 컴포넌트의 재사용성을 크게 높일 수 있습니다. 동일한 컴포넌트를 다양한 데이터와 함께 사용해 유연한 UI를 구성할 수 있습니다.

예제: 버튼 컴포넌트 재사용

import React from "react";

function Button(props) {
  return <button style={{ backgroundColor: props.color }}>{props.label}</button>;
}

function App() {
  return (
    <div>
      <Button label="확인" color="blue" />
      <Button label="취소" color="red" />
    </div>
  );
}

export default App;

결과:

• 파란색 "확인" 버튼과 빨간색 "취소" 버튼이 출력됩니다.

---

7. 결론

React의 props는 컴포넌트 간 데이터를 전달하고 재사용성을 높이는 핵심 개념입니다. 단순한 데이터 전달부터 타입 검증과 기본값 설정까지 props는 다양한 기능을 제공하며, React 앱을 설계하는 데 있어 필수적인 요소입니다. 본 글에서 다룬 내용을 실제 프로젝트에서 활용해보세요! PropTypes와 기본값 설정 같은 추가 기능은 데이터의 신뢰성을 높이는 데 도움을 줄 것입니다.