React Props를 통한 데이터 전달

 

React는 컴포넌트 기반의 라이브러리로, 복잡한 UI를 작은 컴포넌트들로 나누어 효율적으로 관리할 수 있게 도와줍니다. 그 중에서 데이터를 부모 컴포넌트에서 자식 컴포넌트로 전달하는 가장 기본적인 방법은 props(속성) 을 사용하는 것입니다. React에서 props는 컴포넌트 간에 데이터를 전달하고, 컴포넌트의 동작을 제어하는 중요한 역할을 합니다. 이 글에서는 React props를 통해 데이터를 전달하는 방법을 다루고, 다양한 예제와 함께 실용적인 사용법을 소개할 것입니다.

---

1. Props란 무엇인가?

React에서 props는 "properties"의 줄임말로, 부모 컴포넌트가 자식 컴포넌트에게 전달하는 읽기 전용(read-only) 데이터입니다. props는 주로 UI의 상태나 동작을 제어하는 데 사용됩니다. 컴포넌트가 생성될 때, props는 컴포넌트의 속성으로 전달되며, 해당 컴포넌트는 이를 받아서 렌더링할 때 사용합니다.

2. Props의 기본 사용법

React 컴포넌트에서 props는 함수의 인자로 전달됩니다. 자식 컴포넌트는 부모 컴포넌트로부터 받은 props를 통해 데이터를 표시하거나, 동작을 제어할 수 있습니다. 기본적인 예제를 살펴보겠습니다.

예시 1: 기본적인 Props 전달

import React from 'react';

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

// 부모 컴포넌트
function App() {
  return <Greeting name="React 사용자" />;
}

export default App;

위 코드에서 App 컴포넌트는 Greeting 컴포넌트에게 name이라는 prop을 전달합니다. Greeting 컴포넌트는 이를 받아 props.name을 사용하여 사용자에게 인사 메시지를 출력합니다.

예시 2: 여러 개의 Props 전달

import React from 'react';

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

function App() {
  return (
    <UserProfile name="홍길동" email="hong@example.com" />
  );
}

export default App;

여기서는 name과 email이라는 두 개의 props를 UserProfile 컴포넌트에 전달합니다. 자식 컴포넌트는 두 개의 prop을 받아 각각 사용자 이름과 이메일을 화면에 표시합니다.

3. Props의 특성

React에서 props는 읽기 전용입니다. 즉, 자식 컴포넌트는 부모 컴포넌트로부터 받은 props를 직접 수정할 수 없습니다. 컴포넌트의 상태(state)는 자식에서 변경할 수 있지만, props는 변경할 수 없습니다. 만약 자식 컴포넌트가 데이터를 수정할 필요가 있다면, 부모 컴포넌트에게 이벤트를 전달하여 부모 컴포넌트의 상태를 변경하고, 그에 따라 다시 props를 업데이트할 수 있습니다.

예시 3: Props와 State의 차이

import React, { useState } from 'react';

function Counter(props) {
  const [count, setCount] = useState(props.initialCount);

  const increment = () => setCount(count + 1);

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={increment}>카운트 증가</button>
    </div>
  );
}

function App() {
  return <Counter initialCount={10} />;
}

export default App;

이 예제에서는 부모 컴포넌트 App이 자식 컴포넌트 Counter에 initialCount prop을 전달합니다. Counter 컴포넌트는 전달받은 initialCount를 상태로 사용하여 카운터 값을 표시하고, 버튼 클릭 시 카운트를 증가시킵니다. 이처럼 props는 초기값을 설정하는 데 사용되고, 상태는 컴포넌트 내부에서 관리됩니다.

4. Props의 유효성 검사 (PropTypes)

React는 PropTypes 라이브러리를 제공하여 props의 타입을 검사하고, 잘못된 값이 전달될 경우 경고를 표시할 수 있습니다. 이는 컴포넌트의 안정성과 코드의 유지보수성을 높이는 데 유용합니다.

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

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

UserProfile.propTypes = {
  name: PropTypes.string.isRequired,
  email: PropTypes.string.isRequired,
};

function App() {
  return <UserProfile name="홍길동" email="hong@example.com" />;
}

export default App;

위 코드에서는 UserProfile 컴포넌트의 name과 email props가 반드시 문자열이어야 하며, 이 두 props는 필수로 제공되어야 한다는 조건을 추가했습니다. 만약 타입이 맞지 않거나 필수 props가 누락되면, React는 개발 환경에서 경고 메시지를 표시합니다.

5. Props와 컴포넌트 재사용성

React의 가장 큰 장점 중 하나는 컴포넌트의 재사용성입니다. props는 컴포넌트를 재사용할 수 있게 해주며, 다양한 데이터를 전달하여 동일한 컴포넌트를 다양한 방식으로 활용할 수 있습니다. 부모 컴포넌트가 props를 변경함으로써 자식 컴포넌트의 동작을 조절할 수 있습니다.

예시 4: 동적인 Props 사용

import React from 'react';

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

function App() {
  return (
    <div>
      <Button color="blue" label="블루 버튼" />
      <Button color="green" label="그린 버튼" />
      <Button color="red" label="레드 버튼" />
    </div>
  );
}

export default App;

여기서는 Button 컴포넌트를 여러 번 사용하고, 각 버튼에 서로 다른 color와 label prop을 전달하여 버튼의 색상과 라벨을 동적으로 변경했습니다. 이렇게 props를 사용하면 컴포넌트를 여러 상황에 맞게 재사용할 수 있습니다.

6. 결론

React에서 props는 컴포넌트 간 데이터 전달의 핵심적인 방법입니다. props를 사용하면 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하고, 컴포넌트 간의 독립적인 상태 관리가 가능해집니다. 이로써 React 애플리케이션을 더욱 효율적이고 유지보수하기 좋은 구조로 만들 수 있습니다. 다양한 예제를 통해 props의 기본 사용법과 고급 기능까지 살펴보았으니, 이제 여러분도 React의 컴포넌트 간 데이터 흐름을 보다 잘 이해하고 활용할 수 있을 것입니다.