Component API 종류 참조

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

• 함수 Component

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

  이 함수는 데이터를 가진 하나의 “props” (props 는 속성을 나타내는 데이터입니다.) 객체 인자를 받은 후 React Element를 반환하므로 유효한 Component입니다. 이러한 Component는 JavaScript 함수이기 때문에 말 그대로 “함수 Component”라고 호칭합니다.

• 클래스 Component

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

2. 컴포넌트 렌더링

• React Element는 DOM태그 말고 사용자 정의 Component로도 나타낼 수 있습니다.

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

  • React가 사용자 정의 Component로 작성한 Element를 발견하면 JSX 어트리뷰트와 자식을 해당 Component에 단일 객체로 전달합니다. 이 객체를 Props라고 합니다.

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로 나누는 것을 두려워하지 마세요

• 처음에는 Component를 추출하는 작업이 지루해 보일 수 있습니다. 하지만 재사용 가능한 Component를 만들어 놓는 것은 더 큰 앱에서 작업할 때 두각을 나타냅니다.
• UI 일부가 여러 번 사용되거나 (Button, Panel, Avator)
• UI 일부가 자체적으로 복잡한(App, FeedStory, Comment) 경우는 별도의 Component로 만드는게 좋습니다.