<React> props of Component

Component의 특징인 props 대해 알아보겠습니다. Component가 JSX를 return하는 함수로 정의했었는데요. 함수로 정의되는 만큼 property를 전달할 수 있습니다. property들을 props라고 부릅니다. props는 Component의 재사용률을 높이는 매우 중요한 요소입니다. property 전달 방법 그리고 전달 받은 property는 어떻게 사용하는지 알아보겠습니다.

사용법

<Component <proprty명> = <property값>>으로 전달할 수 있는데요. 전달한 property들은 Object형태로 props에 담겨 Component에 전달됩니다.

• 사용 가능한 property 값
  • String
    ex) string = "String"
  • Array
    ex) array = {[1, 2, 3, 4]}
  • boolean
    ex) boolean = {true}
• 실제 전달 형태
  실제 전달 형태는 아래와 같이 Object 입니다.

Object{
  String: "String",
  Array: [1, 2, 3, 4],
  boolean: true
}

app.jsx

사용법을 토대로 실습을 해보겠습니다. 참고로 jsx에서 변수를 사용할때는 {}을 이용합니다. 아래와 같은 코드의 결과로 화면에서 hello minseok을 확인할 수 있게 됩니다.

/* deconstructor가 직관적이지 않다면 이것 처럼 해도 됩니다.
function Component(props){
  return <h3>hello {props.name}</h3>;
}
*/

function Component({name}){
  return <h3>hello {name}</h3>
}

function App(){
  return (
    <div>
      <Component name = "minseok">
    </div>
  )
}

export default App;