Props in React: 컴포넌트에서 Props 전달 및 사용 방법.

작성일 : 2024-07-05

Props in React: 컴포넌트에서 Props 전달 및 사용 방법

React는 현대적인 웹 애플리케이션을 만들기 위해 널리 사용되는 JavaScript 라이브러리입니다. React의 핵심 개념 중 하나는 'Props'입니다. Props는 'Properties'의 약자로, 컴포넌트 간에 데이터를 전달하는 데 사용됩니다. 이 글에서는 Props의 기본 개념부터 실제 예제를 통해 컴포넌트에서 Props를 전달하고 사용하는 방법에 대해 자세히 알아보겠습니다.

Props란 무엇인가?

Props는 React 컴포넌트 간에 데이터를 전달하기 위해 사용되는 읽기 전용 속성입니다. 즉, 부모 컴포넌트가 자식 컴포넌트에게 데이터를 내려주는 방식으로 사용됩니다. Props는 함수의 매개변수와 유사하며, 부모 컴포넌트에서 자식 컴포넌트로 전달됩니다. Props를 사용하면 컴포넌트의 재사용성과 유지보수성을 높일 수 있습니다.

Props의 특징

읽기 전용: Props는 단방향 데이터 흐름을 유지하기 위해 읽기 전용으로 설계되었습니다. 자식 컴포넌트는 부모로부터 받은 Props를 변경할 수 없습니다.
데이터 전달: 부모 컴포넌트는 Props를 통해 자식 컴포넌트로 데이터를 전달할 수 있습니다. 자식 컴포넌트는 받은 Props를 사용하여 자신의 상태를 결정하거나 화면을 렌더링할 수 있습니다.
재사용성: Props를 사용하면 컴포넌트의 재사용성이 높아집니다. 동일한 컴포넌트를 다른 데이터로 여러 번 사용할 수 있습니다.

Props 전달하기

부모 컴포넌트에서 자식 컴포넌트로 Props를 전달하는 방법은 매우 간단합니다. 부모 컴포넌트에서 자식 컴포넌트를 호출할 때, HTML 속성을 사용하듯이 Props를 전달할 수 있습니다. 아래 예제를 통해 자세히 살펴보겠습니다.


javascript
import React from 'react';

class ParentComponent extends React.Component {
  render() {
    return (
      <div>
        <ChildComponent name="John" age={30} />
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, my name is {this.props.name}</h1>
        <p>I am {this.props.age} years old</p>
      </div>
    );
  }
}

export default ParentComponent;

위 코드에서 ParentComponent는 ChildComponent에게 name과 age라는 Props를 전달하고 있습니다. ChildComponent는 this.props를 사용하여 전달된 Props를 참조합니다.

Props 사용하기

Props를 사용하는 방법은 간단합니다. 클래스형 컴포넌트에서는 this.props를 사용하고, 함수형 컴포넌트에서는 함수의 매개변수로 받은 인자를 사용합니다. 아래 예제는 함수형 컴포넌트에서 Props를 사용하는 방법을 보여줍니다.


javascript
import React from 'react';

function ChildComponent(props) {
  return (
    <div>
      <h1>Hello, my name is {props.name}</h1>
      <p>I am {props.age} years old</p>
    </div>
  );
}

function ParentComponent() {
  return (
    <div>
      <ChildComponent name="John" age={30} />
    </div>
  );
}

export default ParentComponent;

함수형 컴포넌트에서는 props를 인자로 받아서 사용합니다. 이는 클래스형 컴포넌트에서 this.props를 사용하는 것과 동일한 효과를 가집니다.

Props의 기본값 설정하기

Props를 전달하지 않을 경우 기본값을 설정할 수 있습니다. 이를 통해 컴포넌트가 예상치 못한 에러 없이 동작할 수 있습니다. 기본값을 설정하는 방법은 클래스형 컴포넌트와 함수형 컴포넌트에서 다릅니다.

클래스형 컴포넌트에서 기본값 설정하기


javascript
import React from 'react';

class ChildComponent extends React.Component {
  static defaultProps = {
    name: 'Guest',
    age: 25
  };

  render() {
    return (
      <div>
        <h1>Hello, my name is {this.props.name}</h1>
        <p>I am {this.props.age} years old</p>
      </div>
    );
  }
}

export default ChildComponent;

함수형 컴포넌트에서 기본값 설정하기


javascript
import React from 'react';

function ChildComponent(props) {
  return (
    <div>
      <h1>Hello, my name is {props.name}</h1>
      <p>I am {props.age} years old</p>
    </div>
  );
}

ChildComponent.defaultProps = {
  name: 'Guest',
  age: 25
};

export default ChildComponent;

Props 검증하기

React에서는 PropTypes를 사용하여 Props의 타입과 필수 여부를 검증할 수 있습니다. 이는 컴포넌트에 전달되는 Props가 예상한 타입과 일치하는지 확인할 수 있게 도와줍니다.

PropTypes 사용 예제


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

function ChildComponent(props) {
  return (
    <div>
      <h1>Hello, my name is {props.name}</h1>
      <p>I am {props.age} years old</p>
    </div>
  );
}

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

export default ChildComponent;

위 예제에서 propTypes를 사용하여 name과 age가 필수 Props임을 지정하고, 각각의 타입이 문자열과 숫자임을 명시하고 있습니다.

결론

이 글에서는 React에서 Props를 사용하여 컴포넌트 간에 데이터를 전달하고 사용하는 방법에 대해 알아보았습니다. Props는 컴포넌트를 재사용 가능하게 만들고, 필요한 데이터를 컴포넌트 간에 효율적으로 전달하는 중요한 개념입니다. Props의 기본 개념, 전달 방법, 사용 방법, 기본값 설정, 및 PropTypes를 통한 검증 방법을 통해 React 개발에 보다 익숙해지길 바랍니다.