컴포넌트(Component)란?(좀더 이해하기 쉽게 수정해야함)

컴포넌트(Component)

 컴포넌트는 개념적으로 props라는 input값을 받고나서, UI, 즉 View(state) 상태에 따른 화면에 어떻게 출력이 되는지 Output을 React Element로 보여주는 함수를 뜻한다. 그래서 합성을 통해 UI를 재사용할 수 있고, 독립적인 단위로 쪼개어 생각할 수 있게 한다.  React API 공식문서에 따르면 상속을 따르는 대신 모듈로 따로 분리해 합성을 사용하길 권장한다.

 

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

1. 함수형 컴포넌트

import React from 'react';

function ReactFunc(props) {
  //...statements
}

 

2. 클래스형 컴포넌트

import React from 'react';

class ReactFunc extends React.Component {
  constructor(props){
   super(props)
   this.state = {}
  }
  
  render() {
    return (
      //...statements
    );
  }
}

 

컴포넌트 합성

컴포넌트에서 합성은 서로 다른 객체를 여러개 붙여 새로운 기능이나 객체를 구성하는 행위를 말한다. 상속과는 다르게 클래스나 함수간 유기적으로 융통성있게 합성할 수 가 있다.

 

 예를들면 어떤 컴포넌트를 만들어 새로 만든 컴포넌트를 담아줘야할 때가 있다. 만약 자식 요소가 무엇이 들어올지 알지 못하는 상황에서 컴포넌트를 제작한다고 생각해보자.

 

어떠한 자식요소를 prop을 통해 출력에 그대로 전달하기 위해서는 .children이라는 방법을 사용할 수가 있다.

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

export default FancyBorder

 이렇게 props.children를 사용하게 되면 다른 컴포넌트에서 JSX를 중첩하여 어떤 자식이든 전달할 수 있게된다.

import './FancyBorder.js'

function WelcomeDialog() {
  return (
    <FancyBorder color="green">
      <h2 className="Dialog-title">
        New Dialog
      </h2>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    </FancyBorder>
  );
}

export default WelcomeDialog;

<FancyBorder> JSX 태그 안에 있는 것들은 children prop을 통해 전달이된다. 최종적으로 FancyBorder안에 {props.children}을 <div>안에 전달된 요소들이 렌더링해서 출력을 하게된다.