Props 와 Children

Props
: 컴포넌트를 작성할 때 컴포넌트에도 속성을 지정할 수 있다.

- 리엑트에서 컴포넌트에 지정한 속성들을 Props라고 부른다.
- 컴포넌트에 속성을 지정해주면 각 속성이 하나의 객체로 모여서 컴포넌트를 정의한 함수의 첫번째 파라미터로 전달
- props가 객체 형태를 띄고 있으면 디스트럭처링 문법을 활용해서 조금 더 간결하게 코드를 작성할 수 있다.

 

 

부모 컴포넌트

 

import Dice from './Dice';

function App() {
  return (
    <div>
      <Dice color="blue" />
    </div>
  );
}

export default App;

 

자식 컴포넌트

 

function Dice(props) {
  console.log(props)
}

export default Dice;

 

디스트럭처링 

 

function Dice({ color = 'blue', num = 1 }) {
}

 

children
: props에는 children이라는 조금 특별한 프로퍼티가 있다. 

- 컴포넌트를 단일 태그가 아니라 여는 태그와 닫는 태그의 형태로 작성하면
그 안에 작성된 코드가 바로 children 값에 담긴다.  직관적으로 담긴다!! 

하지만, props 속성을 많이 사용하기 때문에 이거는 넘어가자!