[ React ] 함수형 vs 클래스형 컴포넌트

📌 함수형 vs 클래스형 컴포넌트의 차이점

리액트 컴포넌트를 선언하는 두 가지 방식에는 함수형과 클래스형이 있다. 클래스형 이후에 함수형이 나왔지만, 클래스형을 쓰던 기업의 프로젝트 유지보수를 위해 개념을 알고 있어야 한다. 최근에는 함수형 + 클래스형의 장점을 넣은 리액트 훅을 사용하는 추세이다.

클래스형 컴포넌트는 로직을 컴포넌트 내에서 구현하기 때문에 더 복잡한 UI를 갖게 된다. 반면에, 함수형 컴포넌트는 props로 데이터를 받아서 UI에 뿌려주기 때문에 상대적으로 단순한 형태를 갖게 되며 재사용성이 높다는 장점이 있다.

클래스형 컴포넌트

• class 키워드 필요
• Component로 상속 받음
• render() 메소드 필요
• state, lifeCycle 사용 가능
• this.state 초기값 설정, 변경 가능
• this.props로 데이터 불러옴
• 메모리 자원의 많은 사용
• 임의 메소드 정의 가능

함수형 컴포넌트

• state, lifeCycle 사용 불가 (Hook으로 해결)
• useState 함수로 state 사용
• props 불러올 필요 없이 바로 호출
• 메모리 자원 덜 사용
• 컴포넌트 선언이 편리함