React class형 컴포넌트, 함수형 컴포넌트

클래스형 컴포넌트

컴포넌트를 선언하는 방식은 2가지가 있다. 하나는 함수형 컴포넌트고, 하나는 클래스형 컴포넌트다.

우선 클래스형 컴포넌트가 어떻게 이루어졌는지 보자

import { Component } from "react";

class App extends Component {
    render() {
        const name = 'kim'
        return <div className="eeact">{name}</div>
    }
}

클래스형 컴포넌트는 state, 라이프 사이클 기능 사용 가능, 임의 메서도 정의 가능
클래스형 컴포넌트에서는 render() 함수가 꼭 있어야 하고 그 안에 JSX를 반환해야 함

함수형 컴포넌트도 어떻게 이루어 졌는지 알아보자

const App = () => {
  return <div className="App">리액트를 다루는 기술</div>;
}

export default App;

화살표 함수(arrow function)은 ES6 문법에서 함수를 표현하는 새로운 방식이며 기존 function을 이용한 함수를 
완전히 대체하지는 않음, 사용 용도가 조금 다르고(무엇보다 서로 가르키는 this가 다름)
주로 이 문법은 파라미터로 전달할 때 유용함

this사용법 출처: 나
그렇다면 함수 컴포넌트를 어떤 상황에 사용해야 할까?

우선 함수형 컴포넌트의 장점은 클래스형 컴포넌트보다 선언하기가 편하고 메모리 자원도 클래스형 컴포넌트보다 덜 사용한다. 또한, 프로젝트를 완성한 후 빌드, 배포할 때도 함수형 컴포넌트를 사용하는 것이 결과물의 파일 크기가 더 작다(사실상 별 차이가 없으므로 중요하진 않음)

함수형 컴포넌트의 단점은 state와 라이프사이클 API의 사용 불가능하다는 점 그러나 React v16.8 업데이트 이후 Hooks라는 기능이 도입 되면서 단점이 해결 되었다.

++ 컴포넌트를 선언할 때 function 키워드를 사용하는 것과 화살표 함수 문법을 사용하는 것에는 큰 차이가 없다 화살표 함수가 조금 더 간결하기 때문에 나는 화살표 함수를 애용함