[ react ] props란?

props

• 간단히 말하자면 컴포넌트에서 컴포넌트로 전달하는 데이터.
• 컴포넌트의 props를 사용하면 컴포넌트를 효율적으로 재사용할 수 있다.
• 컴포넌트 매개변수

문자열이 아닌 경우 중괄호{}를 사용한다.

import React from 'react';

function Food() {
  return <h3>I like Potato</h3>;
}

function App() {
  return(
    <div>
      <h1>Hello World</h1>
      <Food fav="kimchi" something={true} papapapa={['hello', 1, 2, 3, 4, true]}/>
    </div>
  );
}

export default App;

• 컴포넌트의 첫번째 인자로는 props가 전달된다.
• App컴포넌트에서는 props에 있는 데이터를 객체(Object)로 변환하여 Food 컴포넌트(함수)에 전달.

import React from 'react';

function Food(props) {
  console.log(props);
  return <h3>I like {props.fav}</h3>;
}

function App() {
  return(
    <div>
      <h1>Hello World</h1>
      <Food fav="kimchi"/>
    </div>
  );
}

export default App;

• props를 이용하여 출력하려면 . 연산자를 사용한다.
• props 객체를 이용해서 출력하려면 {} 중괄호에 감싸서 사용한다.