리액트 클래스형과 함수형 컴포넌트

React에서 컴포넌트를 만들 때 클래스형 컴포넌트와 함수형 컴포넌트 2가지 방식이 있다.
이전에는 클래스형 컴포넌트를 주로 사용하였지만 2019년 React v16.8 부터 함수형 컴포넌트에 리액트 훅(Hook)이 추가 되어 현재는 공식 문서에서도 함수형 컴포넌트와 훅을 함께 사용할 것을 권장하고 있다.

컴포넌트가 뭐야?

여기서 컴포넌트가 뭔가 간단히 짚고 넘어가보자 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주는 기능을 하는 것은 물론, 라이프 사이클 API를 통해 컴포넌트가 화면에 나타날 때, 사라질 때, 변할 때 작업들을 수행할 수도 있다.

컴포넌트 목적에 따라 presentational, container 컴포넌트로 나누기도 한다.

클래스형 컴포넌트와 함수형 컴포넌트의 차이는?

1. 선언 방식

클래스형 컴포넌트

1. class 키워드가 필요하다.
2. Cpomponent로 상속을 받아야 한다.
3. render() 메소드가 반드시 필요하다
4. state, lifeCycle 관련 기능 사용이 가능하다.
5. 함수형보다 메모리 자원을 더 사용한다.
6. 임의 메소드를 정의할 수 있다.

함수형 컴포넌트

1. state, lifeCycle 관련 기능 사용 불가.

• React Hook으로 해결

2. 클래스형보다 메모리 자원을 덜 사용한다.
3. 클래스형보다 선언하기가 편리하다.

2. State

State는 컴포넌트 내부에서 바뀔 수 있는 값이다.

클래스형 컴포넌트

1. constructor 에서 this.state 로 초기 값을 설정한다.
2. 물론 constructor 없이도 state 초기 값 설정 가능하다.
3. this.setState() 를 통해 state 값을 변경한다.
4. 클래스형의 state는 객체형식이다.

함수형 컴포넌트

1. useState() 로 state를 사용한다.
2. useState() 를 호출하면 배열이 반환되는데 첫 번째 원소는 현재 상태 두 번째 원소는 상태를 바꿔주는 함수이다.

3. Props

props 는 properties 를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용한다.
props 는 부모 컴포넌트가 자식 컴포넌트에게 값을 전달하는 기능을 한다.

클래스형 컴포넌트

1. this.props 를 사용해서 값을 불러온다.

함수형 컴포넌트

1. props를 불러올 필요 없이 호출해서 사용 가능하다.

4. Event Handling

클래스형 컴포넌트

1. 함수 선언시 바로 선언이 가능하다.
2. 요소에 적용시 this. 를 붙여야 한다.

함수형 컴포넌트

1. const + 함수 형태로 선언한다.
2. 요소에 적용시 this 가 필요없다.

5. Life Cycle

React에서 컴포넌트는 여러 종류의 생명주기 메소드 를 가지며 이 메소드를 오버라이딩(상속하여 재정의) 하여 특정 시점에 코드가 실행되도록 설정 한다.
하지만 이는 클래스 컴포넌트에 해당하는 얘기이며 함수형 컴포넌트는 Hook 을 사용해 생명주기에 원하는 동작을 한다.

Life Cycle은 크게 세 단계로 나뉜다.

1. 생성시 (Mount)
2. 업데이트시 (Update)
3. 제거시 (Unmount)

1. constructor

클래스형

생성자 메소드이다. 컴포넌트가 생성되면 가장 먼저 실행된다. 이 메소드는 초기 state를 정할 수 있다.

함수형

함수형에서는 useState() 훅을 사용하여 state를 설정할 수 있다.

2. render

컴포넌트를 렌더링 하는 메소드이다.

클래스형

함수형

함수형 컴포넌트에서는 render를 쓰지 않고 컴포넌트를 렌더링할 수 있다.

3. componentDidMount

컴포넌트의 첫 렌더링이 마치고 나면 호출되는 메소드이다. 즉 이 메소드가 호출이 될 때는 컴포넌트가 화면에 나타나있는 상태다.

클래스형

함수형

함수형 컴포넌트에서는 useEffect() 훅을 이용해 componentDidMount와 componentDidUpdate, componentDidUnmount까지 나타낼 수 있다.

4. componentDidUpdate

리렌더링을 마친 후 변화가 모두 반영된 뒤 실행. 업데이트가 끝난 직후임으로 DOM 관련 처리가 가능하다. 매개변수로는 prevprops , prevState가 있는데 이는 각각 업데이트 되기 전 props, state 이다.

클래스형

함수형

dependency array 에 특정 값을 넣게 되면 값이 바뀔때 호출이 된다.

5. componentDidUnmount

컴포넌트를 DOM에서 제거할 때 실행한다. componentDidMount에서 등록한 이벤트가 있다면 여기서 제거 작업을 한다. (e.g. removeEventListener) 만약에 setTimeout 을 걸었다면 clearTimeout 을 통하여 제거를 한다.

클래스형

함수형

함수형 컴포넌트에서는 useEffect()의 return 부분에 Unmount할 때 cleanUp 메소드를 적어주면 된다.

그래서 어떤 방식을 써야 할까?

React 공식홈페이지에서 함수형 컴포넌트를 사용하길 권장하고 있고 많은 개발자들이 선호하는 방식이다. 그래서 함수형 컴포넌트 사용을 추천한다.
하지만 훅 등장 이전에 만들어진 프로젝트 중 클래스형 컴포넌트로 이루어진 경우가 더 많아 클래스형 컴포넌트의 사용법도 알아야 할 것이다.

참고한 글

함수형 컴포넌트와 클래스형 컴포넌트의 차이