[본캠프] REACT 3. PROPS(Read-Only)

부모 컴포넌트를 자식한테 줌.

function Mother() {
  const lastName = '최';
  return <Child lastName={lastName} />;
}

function Child(p) {
  console.log('props=>', p)
  const name = '르탄';
  return <div>
    <p>{`내이름은${p.lastName}${name}`}</p>
  </div>;
}

 

 

 

 

 

자식 컴포넌트를 부모한테 줌.

function GrandFather() {
  const name = '르탄이';
  return <Mother name={name} />;
}

function Mother(p) {
  const name = p.name;
  return <Child name={name} />;
}

function Child(p) {
  const name=p.name;
  return <div>
    {name}
  </div>;
}

 

 

 

 

children

import React from 'react'


const User = (props) => {
  console.log('props=>', props);
  return <div>유저님 {props.children}</div>;
}
const App = () => {
  return <User>안녕하세요</User>;
};

export default App;

 

 

 

---

너무 이해 안되길래 찾아봤다.

에어앤비 들어가보면 지역카드들의 데이터는 각각 다르다. 

이게 props라는 것.

 

즉 같은 component로 찍어낸 element안에 든 데이터가 바로 props라는 것이다.

컴포넌트가 부모로부터 받아오는 정보!!

 

또한 리액트 컴포넌트는  props를 직접 바꿀 수 없고 같은 props에 대해 항상 같은 결과를 보여줘야한다.

즉, javascript에서의 파라미터와 같다.