[React] 클래스형(Class) 컴포넌트와 함수(Funtion)컴포넌트 차이점

[리액트란?]

리액트를 사용하여 프론트엔드 개발을 할 때 두가지 방법으로 컴포넌트를 선언할 수 있다. 과거에는 클래스형 컴포넌트를 주로 사용했지만, 2019년 v16.8 부터 함수형 컴포넌트에 리액트 훅(hook)을 지원해 주어서 현재는 공식문서에서 함수형 컴포넌트와 훅을 함께 사용할 것을 권장하고 있다. 두가지 방법에 대해 알고 있어야, 필요한 상황에 맞게 사용할 수 있으므로 각각의 방법에 대해서 좀 더 깊이있게 살펴봐야 겠다.

 

컴포넌트는 단순한 템플릿 이상의 기능을 수행한다. 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주는 기능을 하는 것은 물론, 라이플 사이클 API를 통해 컴포넌트가 화면에 나타날때, 사라질 때, 변할 떄 작업을 수행할 수도 있다. 컴포넌트의 목적에 따라 프리젠테이션 컴포넌트와 컨테이너 컴포넌트로 나누기도 한다.

 

[클래스형과 함수형 차이]

클래스형 컴포넌트와 함수형 컴포넌트의 역할은 동일하다. 차이점이 있다면 클래스형 컴포넌트의 경우 state 기능 및 라이플 사이클 기능을 사용할 수 있으며 임의 메서드를 정의할 수 있다는 점이다. 그리고 render 함수가 꼭 있어야 하고, 그 안에서 보여 주어야 할 JSX를 반환해야 한다. 또한 과거의 prototype을 이용해서 구현하던 클래스 문법을 ES6 문법 부터는 class 문법을 사용하여 구현할 수도 있다.

 

반면, 함수형 컴포넌트는 클래스형 컴포넌트보다 선언하기가 좀 더 편하고, 메모리 자원을 덜 사용한다는 장점이 있다. 과거에는 함수형 컴포넌트에서 state와 라이플 사이클 API를 사용할 수 없다는 단점이 있었는데, 이러한 단점은 리액트 훅이 도입되면서 해결되었다. 

 

[함수형과 화살표함수 차이]

함수형 컴포넌트를 선언할 때 사용하는 방법으로 기존의 일반적인 함수 선언 방식이 있고, ES6의 화살표 함수(arrow function, 익명 함수) 방식도 있다. 화살표 함수의 경우 함수를 파라미터로 전달할 때 유용하다. 비슷한 점도 많지만, 두 문법이 확실하게 다른점이 있다.

 

1) 선언 방식

 

2)

- 클래스형 : 1. state.lifeCycle 관련 기능 사용이 가능하다. 2. 메모리 자원을 함수형 컴포넌트보다 조금 더 사용한다. 3. 임의 메서드를 정의할 수 있다.

- 함수형 : 1. state, lifeCycle 관련 기능사용 불가능 [Hook을 통해서 해결] 2.메모리 자원을 함수형 컴포넌트보다 덜 사용한다. 3. 컴포넌트 선인이 편하다.

 

3) state 사용차이

state란? 컴포넌트 내부에서 바뀔 수 있는 값(객체)

- 클래스형 : 1. constructor 안에서 this.state 초기 값 설정 가능 2. constructor 없이 바로 state 초기값을 설정할 수 있다. 3. 클래스형 컴포넌트의 state는 객체 형식 4. this.setState 함수로 state의 값을 변경할 수 있다.

- 함수형 : 1. 함수형 컴포넌트에서는 useState 함수로 state를 사용한다. 2. useState 함수를 호출하면 배열이 반환되는데 첫 번째 원소는 현재 상태 3. useState의 두 번째 원소는 상태를 바꾸어 주는 함수이다.

 

4) props 사용차이

props란? 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할때(서로 다른 파일끼리 데이터를 주고 받을 때) 사용한다. props를 전달 받은 자식 컴포넌트에서는 데이터를 수정할 수 없다. 데이터를 변경하기 위해서는 컴포넌트 내부에서만 사용하는 변수에 값을 넣어 사용해야 한다.

1. 컴포넌트의 속성을 설정 할 때 사용하는 요소

2. 읽기 전용

3. 컴포넌트 자체 props를 수정해서는 안된다.

4. 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야한다.

 

클래스 컴포넌트의 props :

1. this.props를 통해 값을 불러올 수 있다.

2. 부모 객체의 키 값, 자식 props를 화용

 

함수형 컴포넌트의 props :

1. props를 불러올 필요 없이 바로 호출 할 수 있다.

 

 

5) Life Cycle 

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ 에서 확인 가능

 

6) 이벤트 핸들링

클래스형 컴포넌트 이벤트 핸들링 :

1. 함수 선언시 에로우 화살로 바로 선언 가능하다.

2. 요소에서 적용하기 위해서는 this를 붙여야 한다.

함수형 컴포넌트에서 이벤트 핸들링 :

1. const 키워드 + 함수 형태로 선언해야한다.

2. 요소에서 적용하기 위해서는 this가 필요없다.