[ React 기초 ] Props 알아보기

Props  알아보기

---

Props  란 ? 

• 외부로부터 전달받은 값 / 부모 컴포넌트로부터 전달받은 값 / 변하지 않는 값
• 컴포넌트의 속성(property)을 의미
• 객체 형태

Props  사용법

const Parent = () => {
  const itemOne = "myossi는";
  const itemTwo = "React를 배우고 있습니당";

  return (
    <div className="Parent">
      <Child text = {itemOne}/>
      <Child text = {itemTwo}/>
    </div>
  );
};

const Child = (props) => {
  return <div className="Child">{props.text}</div>;
};

export default Parent;

간단 설명

1. 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의한다.
2. props를 이용하여 정의된 값과 속성을 전달한다.
3. 전달받은 props를 렌더링한다.

 

풀어서 보자.

부모 컴포먼트에서 itemOne , itemTwo 변수에 각각의 문자열을 저장해 놓았다.

  const itemOne = "myossi는";
  const itemTwo = "React를 배우고 있습니당";

자식 컴포먼트에 itemOne, itemTwo 변수를 함수에 인자를 전달하듯이 props를 전달하고 있다.

전달하면 바로 child함수가 실행된다.

  <Child text = {itemOne}/>
  <Child text = {itemTwo}/>

자식 컴포먼트에서는 div 태그를 이용해 브라우저에 props 객체의 text의 값을 출력하게 된다.

const Child = (props) => {
  return <div className="Child">{props.text}</div>;
};

props는 객체라고 했었다. 콘솔에서 어떻게 찍히는가

1. 부모 컴포먼트에서 자식 컴포먼트로 전달 : <Child text = {itemOne}/> 
2. 자식 컴포먼트에서 함수의 인자를 받는 것 처럼 받는다.
3. 자식 컴포먼트에서 props를 console.log로 찍어봄 : 
{text: "myossi는"}
{text: "React를 배우고 있습니당"}

즉, 부모 컴포먼트에서 자식 컴포먼트로 보낼 때의 문법이 우리가 객체의 키와 값을 지정하는 것과 같다는 문법이다.

 

props를 전달하는 또 다른 방법

• 태그 사이에 value를 넣어 전달하는 방법

const Parent = () => {
  const itemOne = "myossi는";
  const itemTwo = "React를 배우고 있습니당";

  return (
    <div className="Parent">
      <Child>{itemOne}</child>
      <Child>{itemTwo}</child>
    </div>
  );
};

const Child = (props) => {
  return <div className="Child">{props.children}</div>;
};

export default Parent;

• . children을 자체적으로 이용하면 해당 props의 value에 접근하여 사용이 가능하다.