[React] Props

Props

컴포넌트의 속성(property)을 의미합니다.

props는 변하지 않는 외부(부모 혹은 자식 컴포넌트)로부터 전달받은 값이며, 객체 형태입니다.

props는 변하지 않는 값이기에 읽기 전용(read-only) 객체입니다.

// example
function Parent() {
  return (
    <div className="parent">
      <h1>I'm the parent</h1>       
      <Child text={"I'm the first child"} />
      <Child text={"I'm the second child"} />
    </div>
  );
}

function Child(props) {
  console.log("props : ", props);   // {text: "I'm the first child"}
  return (                          // {text: "I'm the second child"}
    <div className="child">
      <p>{props.text}</p>          
    </div>                          // I'm the parent          
  );                                // I'm the first child
}                                   // I'm the second child

반응형

---

props.children

해당 props의 value에 접근하여 사용할 수 있다.

({props.text}로도 value에 접근할 수 있지만, {props.children}도 가능하다.) 

function Parent() {
  return (
    <div className="parent">
      <h1>I'm the parent</h1>
      <Child>I'm the first child</Child>
    </div>
  );
}

function Child(props) {
  console.log(props.children);        // I'm the first child
  return (
    <div className="child">
      <p>{props.children}</p>
    </div>
  );                                  // I'm the parent
}                                     // I'm the first child

---

 

 

Props를 알아보는 시간이었습니다.

틀린 내용은 댓글로 알려주시면 감사하겠습니다.