📌 함수형 vs 클래스형 컴포넌트의 차이점
리액트 컴포넌트를 선언하는 두 가지 방식에는 함수형과 클래스형이 있다. 클래스형 이후에 함수형이 나왔지만, 클래스형을 쓰던 기업의 프로젝트 유지보수를 위해 개념을 알고 있어야 한다. 최근에는 함수형 + 클래스형의 장점을 넣은 리액트 훅을 사용하는 추세이다.
클래스형 컴포넌트는 로직을 컴포넌트 내에서 구현하기 때문에 더 복잡한 UI를 갖게 된다. 반면에, 함수형 컴포넌트는 props로 데이터를 받아서 UI에 뿌려주기 때문에 상대적으로 단순한 형태를 갖게 되며 재사용성이 높다는 장점이 있다.
클래스형 컴포넌트
- class 키워드 필요
- Component로 상속 받음
- render() 메소드 필요
- state, lifeCycle 사용 가능
- this.state 초기값 설정, 변경 가능
- this.props로 데이터 불러옴
- 메모리 자원의 많은 사용
- 임의 메소드 정의 가능
함수형 컴포넌트
- state, lifeCycle 사용 불가 (Hook으로 해결)
- useState 함수로 state 사용
- props 불러올 필요 없이 바로 호출
- 메모리 자원 덜 사용
- 컴포넌트 선언이 편리함