React 컴포넌트 생성하기

React에서는 어플리케이션을 이루는 기본 단위로 '컴포넌트'를 사용합니다.

컴포넌트는 입력받은 데이터(Props)와 뷰(View)에 따라서 알맞은 DOM Node를 출력하는 함수입니다.

아래 두 블럭의 코드는 표현 방식이 서로 다르지만 완전히 동일한 컴포넌트를 출력합니다.

개인적으로는 함수형 컴포넌트가 보기에 깔끔한 것 같은데, 바닐라 자바스크립트에 더 익숙한 분들이라면 클래스형 컴포넌트를 더 선호하시는 것 같습니다.

구글링을 해보면 두 형태 모두 자주 사용되니 두 가지 방식 모두 살펴보고 익숙해지는 것이 좋겠습니다.

1. 클래스형 컴포넌트

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

2. 함수형 컴포넌트

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