[React] 함수형 컴포넌트

함수형 컴포넌트

함수형 컴포넌트?

지금까지 리액트에서 컴포넌트를 작성할 때 class 문법을 이용해서 정의를 했습니다. 라이프 사이클 API와 State를 사용할 필요가 없을경우, props만 전달받아 뷰를 렌더링 해서 간단하게 정의하는 컴포넌트를 의미합니다.

특징

1) 라이프사이클, State등 불필요한 기능을 제거한 상태이기 때문에 일반 클래스형 컴포넌트보다 메모리 소모량이 적고 성능도 조금 더 빠릅니다.

2) ES6의 화살표, 비구조화 할당 문법도 사용 가능합니다.

비교

일반 컴포넌트

import React, { Component } from 'react';

class test extends Component {

render() {

return (

<div>

TEST {this.props.number}

</div>

);

}

}

export default test;

함수형 컴포넌트

import React from 'react';

function Test(props){

return (

<div>

TEST {props.number}

</div>

);

}

export default Test;

함수형 컴포넌트 - ES6

import React from 'react';

const Test = ({num}) => (

<div>Test {num}</div>

)

export default Test;

---

참고 : 리액트를 다루는 기술(저:VELOPERT)