React 기초 - Componet에 value 전달하기 (props)

Componet에 value 전달하기

function App() {
  return (
    <div className="App">
      <New number="One"
        someting={true}
        a={ [1, 2, 3, 4, 5] } />
    </div>
  );
}

• JSX를 활용해 Component에 prop(Property)를 부여해 그에 해당하는 value를 전달할 수 있다.
• prop는 여러 개 만들어 활용할 수 있으며(props), string 뿐 아니라 boolean, 배열 등의 전달도 가능하다.
• 위에서는 number, someting, a가 props이다.

function New(props) {
  return (
    <div className="New">I like {props.number}</div>
  );
}

• 이를 전달받는 component에서는 props를 파라미터 형태로 확인하고 활용할 수 있다.
• HTML 문에서는 {}사이에 props.prop의 형태로 기입해 결과를 처리한다.

function New({ number }) {
  return (
    <div className="New">I like {number}</div>
  );
}

• props는 destruction이 가능하기 때문에 위와 같은 형태로도 처리가 가능하다.
• 이를 활용하면 다양한 값을 가지면서도 비슷한 형태의 Component들을 간단하게 생성할 수 있다.