Component와 Props

컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있음

개념적으로 컴포넌트는 JS 함수와 유사함
'props'라고 하는 임의의 입력을 받은 후,
화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환함

함수 컴포넌트와 클래스 컴포넌트

function welcome(props) {
  return <h1>Hello, {props.name}</h1>
}

이 함수는 데이터를 가진 하나의 'props' (속성을 나타내는 데이터) 객체 인자를 받은 후
React 엘리먼트를 반환하므로 유효한 React 컴포넌트

이러한 컴포넌트는 JS함수이기 때문에 말 그대로 '함수 컴포넌트'라고 호칭

class Welcome extends React.Component {
  	render() {
      	return <h1>Hello, {this.props.name}</h1>;
    }
}

react 관점에서 볼 때 두 가지 유형의 컴포넌트는 동일

컴포넌트 렌더링

이전까지는 React 엘리먼트를 DOM 태그로 나타냈지만,
react 엘리먼트는 사용자 정의 컴포넌트로도 나타낼 수 있음

const element = <Welcome name="Sera" />;

react가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면
JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달하는데 이 객체를 'props'라고 함

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
// Welcome 컴포넌트에 jsx 어트리뷰트, 자식을 전달!
ReactDOM.render(
  element,
  document.getElementById('root')
);

• 프로세스 -

1. 엘리먼트로 ReactDOM.render()를 호출
2. React는 {name: 'Sara'}를 props로 하여 Welcome 컴포넌트를 호출
3. Welcome 컴포넌트는 결과적으로

   Hello, Sara

   엘리먼트를 반환
4. React DOM은

   Hello, Sara

   엘리먼트와 일치하도록 DOM을 효율적으로 업데이트

주의 : 컴포넌트의 이름은 항상 대문자로 시작!

https://ko.reactjs.org/docs/components-and-props.html