Component

Component(컴포넌트)란 재사용 가능한 UI 단위입니다.
Component는 독립적으로, 재사용가능한 코드로 관리할 수 있다.
하나의 컴포넌트에 필요한 html, css, js(validation check)를 모두 합쳐서 만들 수 있다.
React Component에서는 input을 props라고 말하고 return은 화면에 보여져야할 React요소가 return된다.

1. function으로 Welcome 컴포넌트 구현하기

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

2. class로 Welcome 컴포넌트 구현하기

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

class로 Component를 만드려면 React.Component 를 extend해서 생성합니다. Component를 생성할 때 render() 메서드는 무조건 정의해야하고, return도 해주어야 한다.

Component 사용

위 코드처럼 정의한 컴포넌트는 함수/class 이름으로 사용할 수 있다. 태그처럼 으로 작성한다.
우리가 정의한 컴포넌트를 사용할 때, 원하는 attribute를 얼마든지 추가할 수 있다. 그러면 Welcome 컴포넌트(함수)에서 parameter로 해당 attribute를 받아서 사용할 수 있다. 이것을 props(property의 줄임말)라고 말한다.
.(dot)으로 속성명에 접근가능하고, props.속성명 으로 속성 값을 가져올 수 있다.

// 1. Welcome 컴포넌트 정의
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 2. App 컴포넌트 정의
function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

// 3. 화면에 React 요소 그려주기
ReactDOM.render(
  <App />,
  document.getElementById('root')
);