[React] 컴포넌트

함수형 컴포넌트

// 함수형 컴포넌트
function App(){
  const name = '리액트';
  return <div className="react">{name}</div>;
}

장점

클래스형 컴포넌트보다 선언하기 훨씬 쉬움

클래스형 컴포넌트보다 메모리 자원 사용이 적음

프로젝트를 배포할 때 파일 크기가 더 작음

 

단점

state와 라이프사이클 api 사용이 불가능함 --> 리액트 v16.8업데이트(Hooks기능 도입) 이후 해결됨, 

(공식으로 함수형 컴포넌트와 Hooks를 사용하도록 권장)

 

클래스형 컴포넌트

 // 클래스형 컴포넌트
 import React, { Component } from 'react';
 
 class App extends Component {
   render(){
     const name = 'react';
     return <div className="react">{name}</div>;
   }
 }

장점

state 기능 및 라이프사이클 기능 사용 가능 / 임의 메서드 정의가능

 

render 함수가 꼭 있어야 하고 보여주어야 할 jsx를 반환함

 

화살표 함수

function() 을 사용했을 때 this 는 종속된 객체

화살표 함수의 this 는 자신이 종속된 인스턴스 (값을 연산하여 바로 반환해야 할 때 가독성을 높일 수 있음)