react 클래스형과 함수형의 차이를 설명해주세요. 어떤 방식을 주로 사용하였고 그 이유가 뭔지 답변해주세요.
가장 눈에 보이는 차이는 선언 방식이 다르다.
fuction 과 class 키워드를 사용해서 선언한다.
또한 클래스형 컴포넌트는 Component로 상속을 받고 render() 메소드가 반드시 있어야한다.
일반적인 차이로는 클래스형은 state, lifeCycle 관련 기능사용이 가능하며
메모리 자원을 함수형 컴포넌트보다 조금 더 사용한다. 그리고 임의 메서드를 정의할 수 있다.
함수형은 state, lifeCycle 관련 기능사용이 불가능한데 Hook을 통해 해결 된다.
메모리 자원을 함수형 컴포넌트보다 덜 사용하고 컴포넌트 선언이 편하다.
그리고 props 사용에 차이가 있다.
클래스형의 props는 this.props를 통해 값을 불러올 수 있고
함수형에서는 props를 컴포넌트 함수의 인자부분에 넣어두고 따로 불러올 필요 없이 바로 호출 할 수 있다.
이벤트 핸들링에서도 조금의 차이가 있는데
클래스형에서는 함수 선언시 에로우 화살로 바로 선언 가능하다.
요소에 적용하기 위해서는 onChange={this.handleChange}와 같이 this를 붙여야한다.
함수형은 const 이름 + 함수 형태로 선언 해야하며 요소에서 적용할 때 this가 필요없다.
함수형이 클래스형보다 뒤에 나왔기 때문에 더 편한 사용성으로 함수형을 많이 쓰고 있다.
또한 현재 리액트 공식 문서에서도 함수형 컴포넌트와 Hook을 사용하는 것을 권장하고 있다.
구체적인 장점으로는
클래스형 컴포넌트보다 선언하기 편해서 작성코드가 더 적다.
그리고 메모리 자원을 덜 사용하며 빌드 후 파일 크기가 더 작다.
또한 render() 함수가 필요 없어서 컴포넌트 마운트 속도가 더 빠르고, 가독성이 좋은 장점이 있다.
그러나 과거 클래스형을 사용한 프로젝트가 많아 유지보수를 위해서 알아둘 필요가 있다고 생각한다.
