[React] props에 대한 이해

React의 props에 대한 이해.

 

jsx에선 component에 정보를 보낼 수 있다.
컴포넌트에서 컴포넌트로는 물론 컴포넌트에서 children component로 정보를 보낼 수 있다.

 

정보를 보내기 위해서는 아래와 같은 방식을 사용한다.

 

<Content name = "first" />

content라는 component에 name이라는 property에 first라는 값을 주었다는 뜻.

이렇게 지정한 property들을 props라고 부른다

 

function App() {
  return (
    <div>
      <h1>hi hello</h1>
      <Content
        name="first"
        jjjj={true}
        kaksk={["red","orange",1,2,3]}
        />
    </div>
  );
}

예를들면 이런식으로 props name과 value를 마음대로 설정할 수 있고
여러개의 props를 전송할 수 있다.

 

 

function Content(props) {
  console.log(props);
  return <h1>hey</h1>
}
// Object
// jjjj: true
// kaksk: (5) ['red', 'orange', 1, 2, 3]
// name: "first"
// [[Prototype]]: Object

그리고 그 props들을 Contents함수의 인자로 넣어줄 수 있고 object로 받아볼 수 있다.

 

function Content(props) {
  console.log(props.name);
  return <h1>hey</h1>
}

전달받은 props object 내부의 name을 꺼내려면 위와 같이
props.name으로 꺼내서 사용해도 되지만

 

function Content({ name }) {
  console.log(name);
  return <h1>hey</h1>
}

ES6의 방법으로 이렇게 꺼내쓸 수도 있다. 
* 구조분해 할당 사용 가능 (destructuring assignment)
* pops의 이름과 같아야함

 

 

 

function Content({name}) {
  return <h2>Hello, I'm {name}</h2>
}

function App() {
  return (
    <div>
      <h1>Welcome</h1>
      <Content name="Jay"/>
      <Content name="Sujan"/>
      <Content name="Miki"/>
    </div>
  );
}

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

예를들어 App component 안에서 content를 여러 개 렌더링 한다면

아래와 같이 표시된다.

작은 예제만으로도 효율성이 느껴진다.

위 예제는 단순한 렌더링이지만 이 방식을 사용하여

각종 데이터 또한 props로 받은 후 표현해 줄 수 있다는 것을 의미한다.