4. Component 와 Props

컴포넌트 렌더링 예시

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

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

1. ReactDOM.render()를 호출
2. React는 {name: 'Sara'}를 props로 하여 Welcome 컴포넌트를 호출
3. Welcome 컴포넌트는<h1>Hello, Sara</h1> 엘리먼트를 반환
4. React DOM은 <h1>Hello, Sara</h1> 엘리먼트와 일치하도록 DOM을 효율적으로 업데이트

컴포넌트 합성 예시

ex) App 컴포넌트 안에 Welcome 컴포넌트 렌더링!

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

컴포넌트 추출

컴포넌트는 구성요소들이 모두 중첩 구조로 이루어져 있을 때 여러개의 작은 컴포넌트로 나눌 수 있습니다

Props는 읽기 전용!

순수함수는 동일한 인자를 주었을 때 항상 같은 값을 리턴하는 함수, 외부의 상태를 변경하지 않는 함수 입니다.
⭐모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다.