함수형 vs 클래스형

리액트는 왜 클래스형 컴포넌트에서 함수형 컴포넌트로 오게 됐을까?
과게어는 클래스형 컴포넌트를 사용했지만, 현재 리액트 공식 문서에서는 2019년 v16.8 부터 함수형 컴포넌트에 리액트 훅(hook)을 지원해 주어서 함수형 컴포넌트와 훅을 함께 사용할 것을 권장하고 있다.

클래스형 컴포넌트와 함수형 컴포넌트 역할은 동일하다.

1. 클래스형 컴포넌트

• 클래스형 컴포넌트의 경우 state 및 Lifecycle 기능을 사용할 수 있다.
• 반드시 render() 함수를 반환해야 하고, 그 안에서 보여줘야 하는 JSX를 반환해야 함.
• 과거의 prototype을 이용해서 구현하던 클래스 문법을 ES6 문법 부터는 class 문법을 사용하여 구현이 가능하다.
• 임의 메서드를 정의할 수 있다.
• Component로 상속 받음.
• props 조회 시 this 키워드를 사용해서 조회가 가능함.

2. 함수형 컴포넌트

• 말그대로 함수를 기반으로 작성하는 컴포넌트
• 과거에는 함수형 컴포넌트에서 state와 라이프사이클 API를 사용할 수 없었음 → 이러한 단점은 앞서 언급한 것처럼 React Hooks 도입되면서 해결 됨
• 함수형 컴포넌트를 선언할 때 사용하는 방법으로 기존의 일반적인 함수 선언 방식 및 ES6의 화살표 함수(arrow function) 방식도 있다.
(화살표 함수의 경우 함수를 파라미터로 전달할 때 유용)
• JSX를 return문을 사용해서 반환

3. 그럼 왜 함수형 컴포넌트 써요!?

1️⃣ 클래스형 컴포넌트에 비해 훨씬 짧고 직관적인 코드를 짤 수 있고, 함수형 프로그래밍을 할 수 있다.
2️⃣ 메모리 자원을 class형 컴포넌트 보다 덜 사용함.
3️⃣ Component 선언이 편함