React 컴포넌트 만드는 법

React에서 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다. 이번에는 컴포넌트의 Class와 function을 살펴보도록 하겠습니다.

Class 컴포넌트

1. 작성법

// 정의
class ClassComponent extends React.Component {
  render() {
    return (<div>Hello</div>);
  }
}

// 사용
ReactDOM.render(<ClassComponent />, document.querySelector('#root'));

Function 컴포넌트

1. 작성법(1)

// 정의 1
function FunctionComponent() {
  return (<div>Hello</div>);
}

// 사용
ReactDOM.render(<FunctionComponent />, document.querySelector('#root'));

2. 작성법(2)

// 정의 2
const FunctionComponent = () => <div>Hello</div>;