React의 Props

React에서의 Props는 컴포넌트 간의 데이터를 전달하기 위해 사용되는 속성입니다. Props는 부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용하며, 이는 React 애플리케이션의 데이터 흐름에서 매우 중요한 역할을 합니다.

 

Props의 기본 개념

 

• 읽기 전용: Props는 자식 컴포넌트에서 수정할 수 없는 읽기 전용 속성입니다. 자식 컴포넌트가 부모 컴포넌트로부터 데이터를 받지만, 받은 데이터는 자식 컴포넌트 내에서 변경할 수 없습니다.

• 단방향 데이터 흐름: React는 단방향 데이터 흐름(One-way Data Flow)을 지향합니다. 부모 컴포넌트는 자식 컴포넌트로 데이터를 전달할 수 있지만, 반대로는 불가능합니다.

 

Props의 사용법

 

Props는 JSX 문법을 사용하여 컴포넌트의 속성으로 전달됩니다. 속성 이름을 지정하고 값을 할당하면, 해당 값이 자식 컴포넌트에서 props 객체로 전달됩니다.

 

예제 코드

// 부모 컴포넌트
function App() {
  return <Greeting name="John" age={25} />;
}

// 자식 컴포넌트
function Greeting(props) {
  return (
    <div>
      Hello, {props.name}! You are {props.age} years old.
    </div>
  );
}

 

위 코드에서 App 컴포넌트는 Greeting 컴포넌트에 name과 age라는 속성을 전달합니다. Greeting 컴포넌트는 props 객체를 통해 전달받은 속성에 접근하고, 이를 JSX 요소 내에 표시합니다.

 

Props의 구조 분해 할당

 

React에서는 props를 객체 형태로 전달하기 때문에 구조 분해 할당을 사용하여 좀 더 간결하게 사용할 수 있습니다.

function Greeting({ name, age }) {
  return (
    <div>
      Hello, {name}! You are {age} years old.
    </div>
  );
}

 

기본 props 설정

 

컴포넌트에 특정 props가 없을 경우 기본값을 설정할 수 있습니다. 이를 통해 기본 속성을 지정해 특정 값이 전달되지 않더라도 안전하게 사용할 수 있습니다.

function Greeting({ name = "Guest" }) {
  return <div>Hello, {name}!</div>;
}

 

Prop Types 검증

 

React에서는 PropTypes를 사용하여 props의 데이터 유형을 검사할 수 있습니다. 컴포넌트가 예상하는 props의 유형을 정의해두면 개발 중 잘못된 데이터 유형을 전달했을 때 경고 메시지를 받을 수 있어 디버깅에 도움이 됩니다.

import PropTypes from 'prop-types';

function Greeting({ name, age }) {
  return (
    <div>
      Hello, {name}! You are {age} years old.
    </div>
  );
}

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

 

Props의 장점과 주의점

 

• 유지 보수성: 부모와 자식 간의 명확한 데이터 흐름을 통해 코드의 구조가 분명해지고, 유지 보수가 용이해집니다.

• 재사용성: 다양한 값의 props를 전달하여 하나의 컴포넌트를 여러 상황에 재사용할 수 있습니다.

• 주의점: props는 읽기 전용이므로, 자식 컴포넌트에서 props를 변경하려고 하면 오류가 발생합니다.