props란?

부모 컴포넌트가 자식 컴포넌트에 값을 전달할때 매우 유용하게 사용된다

    function Btn({text, big}) {
      return (
        <button
        style={{
          backgroundColor: 'tomato',
          color: 'white',
          padding: '10px 20px',
          border: 0,
          borderRadius: 10,
          fontSize: big ? 18 : 10
        }}
        >
        {text}
        </button>
      )
    }

    function App() {
      return (
        <div>
          <Btn text="Test 1 Btn" big={true}/>
          <Btn text="Test 2 Btn" big={false}/>
          </div>
      )
    }

하나의 예제를 통해 보면

부모 컴포넌트인 App()을 통해
Btn 컴포넌트의 텍스트와 사이즈(big)를 props로 전달해
Btn 컴포넌트 내에서 사용하고 있다

props는 여러개가 전달 가능하며, jsx문법 {}는 잊지 말아야한다

props의 이름

    function App() {
      return (
        <div>
          <Btn text="Test 1 Btn" big={true}/>
          <Btn text="Test 2 Btn" big={false}/>
          </div>
      )
    }

부모 컴포넌트의 props 이름을 보면
text와 big으로 구분되어있는데 전달되는 이름은 코더 마음대로 수정이 가능하다
ex) onClick으로 전달할 수 도 있다 자식 컴포넌트 내에서 이벤트를 만들어 주지않는이상 onClick은 단순 props로 내려간다