8. 함수형 컴포넌트

함수형 컴포넌트 사용법

• 컴포넌트 생성시 마다 클래스와 그 안에 render 매서드 작성 번거로움
• 오직 props 전달받아 랜더링 하는 경우 함수형 컴포넌트로 간단하게 작성

순수 함수 이용한 컴포넌트 선언

import React form "react";

function Hello(props){
  return (
    <div>Hello {props.name}</div>
  )
}
export default Hello;

화살표 함수와 비구조화 할당 문법 사용한 컴포넌트 선언

import React from "react";

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

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

• state, 라이프 사이클 등의 불필요한 기능 제거된 함수형 컴포넌트
• 더 적은 메모리 소모량을 가진 함수형 컴포넌트
• 대부분 함수형으로 작성 but!! state와 라이프 사이클 API를 꼭 써야 할 때만 클래스 형태로 변환