[React] 리액트 - props 사용 방법

React의 props는 한마디로 얘기하면 '속성'이다.
실제로 properties의 줄임말!

props는 컴포넌트로 전달되는 매개변수로, 컴포넌트의 재사용성을 높이고 데이터를 효과적으로 관리할 수 있도록 도와준다.주로 부모 컴포넌트에서 자식 컴포넌트로 ㅗ데이터를 전달할 때 주로 사용된다.

1. props 사용방법 

props 전달하기

부모 컴포넌트에서 자식 컴포넌트로 props를 전달할 때,
HTML 태그 속성을 설정하는 것과 유사한 방식으로 작성한다.

props 사용하기

자식 컴포넌트에서는 전달받은 props를 이용하여
다양한 데이터를 표시하거나 로직에 사용할 수 있다.

// 부모 컴포넌트
function App() {
  return (
    <div>
      <h1>사용자 정보</h1>
      <User name="김철수" age={30} />
    </div>
  );
}

// 자식 컴포넌트
function User(props) {
  return (
    <div>
      <p>이름: {props.name}</p>
      <p>나이: {props.age}</p>
    </div>
  );
}

export default App;

 

2. props 특징

읽기 전용

props 는 자식 컴포넌트에서 수정할 수 없고, 오직 읽기만 가능한 데이터의 단방향의 흐름을 유지한다.

재사용성

같은 컴포넌트를 다른 props로 여러 번 사용할 수 있어 컴포넌트의 재사용성이 증가한다.

// 부모 컴포넌트
function App() {
  return (
    <div>
      <h1>사용자 정보</h1>
      <User name="김철수" age={30} />
      <User name="오이지" age={33} />
      <User name="윤은성" age={23} />
    </div>
  );
}

// 자식 컴포넌트
function User(props) {
  return (
    <div>
      <p>이름: {props.name}</p>
      <p>나이: {props.age}</p>
    </div>
  );
}

export default App;