❓ 컴포넌트란?
컴포넌트란 UI 또는 기능을 부품화해서 재사용 가능하게 하는 것입니다.
리액트를 사용하여 프론트 개발을 할 때 두 가지 방법으로 컴포넌트를 선언할 수가 있습니다.
과거에는 클래스형 컴포넌트를 주로 사용했지만,
2019년 v16.8 부터 함수형 컴포넌트에 리액트 훅(hook)을 지원해 주어서
현재는 공식 문서에서 함수형 컴포넌트와 훅을 함께 사용할 것을 권장하고 있습니다..
두가지의 선언방식은 아래 사진처럼 차이가 있습니다.
Functional Component
함수형이 훨씬 간단하고 화살표 함수로도 적용이 가능합니다.
함수형이 훨씬 간단하지만 클래스형의 기능들을 함수형에서도 쓰고자 나온게 Hook인데 이 Hook들의 설명을 보면 대부분 클래스기능의 대체자라고 말을하지 100% 흉내낼수는 없다고 합니다.
🤔 그럼에도 요즘 함수형을 선호하는 이유는 무엇일까요?
클래스형 컴포넌트는 로직과 상태를 컴포넌트 내에서 구현하기 때문에 상대적으로 복잡한 UI 로직을 갖고 있는 반면,함수형 컴포넌트는 state를 사용하지 않고 단순하게 데이터를 받아서(props) UI에 뿌려준다. Hook들을 필요한 곳에 사용하며 Logic의 재사용이 가능하다는 장점이 있어 함수형 컴포넌트+Hook을 주로 사용한다고 합니다.
특징
- state, lifeCycle 관련 기능사용 불가능하다. [Hook을 통해 해결]
- 클래스형보다 메모지 자원을 덜 사용한다.
- 컴포넌트 선언이 편하다.
Class Component
함수형 컴포넌트와 Hook이 등장하기 전에 폭넓게 사용되었기 때문에, 레거시 코드에서 자주 발견할 수 있는 형태표현방법이 좀 더 명시적이고, 함수형 컴포넌트 보다 약간 기능이 더 많습니다.
그리고 많은 리액트 자료들이 클래스 방식으로 설명되고 있기 때문에 클래스 방식에 대한 충분한 이해가 꼭 필요할것 같습니다.
또한 데이터를 전달할 때 함수 방식에서는 props를 함수의 매개변수 인자로 받지만 클래스 방식에서는 this 키워드를 통해 props에 접근이 가능합니다.
특징
- class 키워드 필요
- Component로 상속을 받아야한다.
- render() 메소드가 반드시 필요하다.
- state, lifeCycle 관련 기능사용이 가능하다.
- 함수형보다 메모리 자원을 더 사용한다.
- 임의 메소드를 정의할 수 있다.
🛑차이점
State
클래스형 컴포넌트
- constructor 안에서 this.state 초기 값 설정 가능
- counstructor 없이도 바로 state 초기값을 설정 가능
- this.setState() 를 통해 state값을 변경
- 클래스형의 state는 객체형식
함수형 컴포넌트
- useState 함수로 state를 사용한다.
- useState 함수를 호출하면 배열이 반환되는데 첫 번째 원소는 현재 상태, 두번째 원소는 상태를 바꿔주는 함수이다.
이벤트 핸들링
클래스형 컴포넌트
- 함수 선언시 화살표 함수로 바로 선언 가능하다.
- 요소에 적용할때 this.를 붙여줘야한다.>클래스형 컴포넌트
- 함수 선언시 화살표 함수로 바로 선언 가능하다.
- 요소에 적용할때 this.를 붙여줘야한다.
함수형 컴포넌트
- const + 함수 형태로 선언해야 한다.
- 요소에 적용할때 this가 필요없다.
