React-함수형 컴포넌트

리액트에서 컴포넌트는 class 문법을 사용해서 아래처럼 정의한다

import React, {Component} from 'react';

class App extends Component {
  render(){
    return(
      <div>
      	Hello{this.props.name}
      </div>
    );
  }
}

export default App;

하지만 컴포넌트가 단지 props를 전달받아 뷰를 렌더링하는 간단한 역할만 한다면

이렇게 class 만들고 render 만들 필요 없이 더 간단하게 할 수 있다

 

import React, {Component} from 'react';

function funcName(props) {
  return(
    <div>
      	Hello{this.props.name}
    </div>
  );
}

export default funcName;

이렇게 함수 형태로 컴포넌트를 선언할 수도 있다

여기서 ES6의 화살표 함수와 비구조화 할당 문법까지 사용하면 아래처럼 된다

 

import React, {Component} from 'react';

const funcName=({name})=>{
  return(
    <div>Hello {name}</div>
  )
}

export default funcName;

또는 {}까지 생략 가능하다

 

import React, {Component} from 'react';

const funcName=({name})=> (
	<div>Hello {name}</div>
)

export default funcName;

 

 

함수형 컴포넌트를 언제 사용할까?

이렇게 컴포넌트를 선언하면 라이프사이클과 state등의 기능을 전부 없앴기 때문에, 메모리 소모량이 적고 약간 더 빨라진다

리액트 프로젝트가 커질 수록 state를 사용하는 컴포넌트 개수를 줄이는 게 속도나 메모리 면에서 이득이므로

state나 라이프사이클API를 꼭 써야할 때만 클래스 형태로 변환하면 좋다

 

 

 

 

참고한 책: 리액트를 다루는 기술-김민준 저