함수형 컴포넌트와 클래스형 컴포넌트의 차이점은? (feat. React Native)

state와 lifecycle 관리 기능

이 질문의 고전적인 답변으로 '클래스형 컴포넌트가 함수형 컴포넌트에 비해 더 많은 기능을 제공한다.'가 있었는데

이유는 원래 클래스형 컴포넌트에서만 사용할 수 있었던 state와 lifecycle 관리 기능 때문이었습니다.

하지만, React Hooks 가 나오면서 함수형 컴포넌트에서도 state와 lifecycle 을 관리할 수 있게 되었습니다.

state

현재는 Hooks가 나와서 둘 다 state 관리를 할 수 있지만, 사용하는 방법에는 차이가 있습니다.

 

클래스형의 경우,

state 변수에 객체 형식으로 state 초기값을 설정하거나, 

constructor 안에서 this.state로 접근하여 초기 값을 설정할 수 있습니다.

state 값을 변경할 때는 this.setState로 접근하여 변경할 수 있습니다.

 

함수형의 경우,

useState라는 Hook을 사용하여 const 변수로 선언해주어야 합니다.

해당 Hook을 사용하면 첫 번째 원소는 현재 상태, 두 번째 원소는 상태를 바꿀 수 있는 함수가 담긴 배열로 반환합니다.

props

클래스형에서 props를 불러올 때는 this.props로 불러올 수 있습니다.

함수형 컴포넌트는 선언 시에 인자로 받아오는 props를 바로 호출할 수 있습니다.

컴포넌트 선언

클래스형 컴포넌트의 경우,

1. class로 선언해주어야 하고,

2. Component를 import 하고 상속받아야 하며,

3. render() 메소드가 반드시 있어야 합니다.

 

반면, 함수형 컴포넌트는 이런 과정이 필요 없기 때문에 클래스형보다 컴포넌트 선언이 좀 더 편리한 장점이 있습니다.

메모리

또한, 일반적으로 클래스형 컴포넌트가 함수형 컴포넌트보다 메모리 자원을 조금 더 사용한다고 합니다.

이벤트 핸들링

클래스형 컴포넌트에서는 Arrow Function으로 바로 선언이 가능하며,

특정 요소에 적용하기 위해서는 this. 이벤트의 형태로 호출해야 합니다.

 

함수형 컴포넌트에서는 const + Arrow Function으로 선언해야 하고,

특정 요소에 적용할 때는 this 필요 없이 바로 이벤트 함수로 호출할 수 있습니다.