Component API 종류 참조

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

2. 컴포넌트 렌더링

3. 컴포넌트 합성

Component는 자신의 출력에 다른 Component를 참조할 수 있습니다. 이는 모든 세부 단계에서 동일한 추상 Component를 사용할 수 있음을 의미합니다.

React 앱에서는 버튼, 폼, 다이얼로그, 화면 등 의 모든 것들이 흔히 Component로 표현됩니다.

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

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

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

일반적으로 새 React앱은 최상위에 단일 App Component를 가지고 있습니다. 하지만 기존 앱에 React를 통합하는 경우에는 Button과 같은 작은 Component부터 시작해서 뷰 계층의 상단으로 올라가면서 점진적으로 작업해야 할 수 있습니다.

4. 컴포넌트 추출

Component를 여러 개의 작은 Component로 나누는 것을 두려워하지 마세요