[ React ] React Props 알아보기.

React를 처음 시작하는 사람들 또는 React의 경험이 많지 않은 사람들에게 비슷해보여서 어렵게 느껴질 수 있는 React Props와 React State에 대해 차이점에 대한 포스팅을 하려고 했지만 React의 Props를 먼저 이해해야 state에 대해 이해하기 더욱 쉬울 것 같아,  props에 대해 먼저 알아보려 한다.

 

props와 state는 React의 클래스 컴포넌트와 함수 컴포넌트에서 모두 사용된다.

 

 

 

 

Props

React에서 props란 "properties"의 줄임말로, 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하기 위한 방법으로, 부모 컴포넌트에서 자식 컴포넌트에게 전달하는 데이터는 props라는 객체 형태로 전달되며, 자식 컴포넌트는 이 props 객체를 통해 데이터에 접근할 수 있으며, 컴포넌트는 데이터를 가진 하나의 props(속성을 나타내는 데이터) 객체 인자를 받을 수 있다.

 

 

 

예제를 통해 props에 대해서 설명을 하자면,

 

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

 

아래와 같이 Welcome이라는 함수 컴포넌트가 존재한다고 할 때, Welcome의 오른쪽 괄호 옆 인자(props)가 Welcome 컴포넌트의 props(속성을 나타내는 데이터)객체 인자이고, Welcome 컴포넌트는 인자로 전달받은 props 객체를 React 엘리먼트를 반환하고 있다.

 

 

 

 

Welcome 컴포넌트는 props를 전달받고, React 엘리먼트 (h1 형태)로 "Hello, {props.name}"을 출력하는 형태이다.

그래서 Welcome 컴포넌트는 props로 받은 객체의 name이라는 키의 값을 리액트 엘리먼트안에서 렌더링 한다.

 

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

 

이 예시 코드는 화면에 아래와 같이 렌더링한다.

 

 

"Hello, Sara"

"Hello, Cahal"

"Hello, Edite"

 

 

이렇게 React에서 Props는 컴포넌트 간에 데이터를 전달하기 위한 매우 중요한 개념이며, React에서 컴포넌트를 재사용하고 유연한 코드를 작성하는 데에 필수적인 요소이다.

 

 

 

 

 

---

 

🌸 출처 🌸

 

Components와 Props - react.org