Props

재사용 가능한 컴포넌트의 내용를 유동적으로 변경하기 위해서 사용한다.

Props 사용

Props 넘기기

상위 컴포넌트에서 하위컴포넌트로 속성이름와 값을 넘겨준다.

function App() {
  return (
    <div className="App">
      <Greet name='철수'/>
      <Greet name='영희'/>
      <Greet name='진수'/>
    </div>
  );
}

Props 값 사용

하위 컴포넌트는 상위 컴포넌트로 받은 props를 선언하여 값을 사용할 수 있다.

const Greet = (props) => {
    console.log(props)
    return (
        <h1>Hello {props.name}</h1>
    )
}

props는 객체값으로 접근이 가능하여 속성이름으로 접근이 가능하다.
표현식을 사용하기 위해서는 중괄호를 안에 넣어야한다.

Children props

태그 내부에 넣은 태그는 Props의 Children으로 넘어간다.

<Greet name='철수' heroName="베트맨">
    <p>This is Children props</p>
</Greet>

Children 사용

<div>
  <h1>Hello {props.name} {props.heroName}</h1>
  {props.children}
</div>

❗주의 : return은 최상단에 하나의 태그로 묶여있어야 한다.