react 함수형

16기 김동하·2021년 1월 31일
1

이번 포스트에서는 React 에서 함수 형태로 컴포넌트를 정의하는 방법을 알아보겠습니다.

React 에서 컴포넌트를 정의 할 때는 보통 EcmaScipt 6 에 도입된 class 문법을 사용합니다. 컴포넌트에서 라이프사이클 API 를 사용해야 하거나, state 를 사용하는 경우에는 꼭 이렇게 정의를 해야하죠.

import React, { Component } from 'react';

class Hello extends React.Component {
render() {
return (

  <div>Hello {this.props.name}</div>
);

}
}

export default Hello;
view rawHello.js hosted with ❤ by GitHub
React.createClass(…) 를 사용하는 방법도 있지만 요즘 잘 사용되지 않는 추세입니다.

만약에 여러분이 만들 컴포넌트가 라이프사이클 API 도 사용하지 않고, state 도 사용하지 않고, 그냥 props 만 전달해주면 뷰를 렌더링만 해주는 역할이라면 함수형 컴포넌트 형식으로 컴포넌트를 정의 할 수 있습니다. 한번 예제를 살펴볼까요?

profile
예비 개발자에서 개발자로!

0개의 댓글