[React] Props로 자식 컴포넌트에게 변수 전달하기

리액트에서는 properties 줄여서 `props`를 사용해서 변수를 전달합니다.

props를 사용하는 방식에는 두가지가 있는데 간단하게 살펴봅시다.

01. 기본 사용법

App.js

function App() {
  return (
    <div className='App'>
      <Hello age={20} name={'Hayden'}/>
    </div>

  );
}

먼저 사용할 컴포넌트에 인자를 넘겨준다.

Hello.js

const Hello = function (props) {

    return <div>
        <h1>Hello {props.name}!</h1>
        <h2>your age is {props.age}</h2>

    </div>
};

export default Hello;

이때, 인자를 넘겨줄 컴포넌트에서는 props라는 변수명을 가진 객체를 인자로 받는다.

실행 결과

02. 응용 사용법

js의 구조 분해 할당 문법을 적용하여 다음과 같이 props를 전달 받을 수도 있다.

Hello.js

const Hello = function ({age, name}) {
    return <div>
        <h1>Hello {name}!</h1>
        <h2>your age is {age}</h2>
    </div>
};

export default Hello;