Mission: react 클래스형과 함수형 관련 질문 정리
📌
react 클래스형과 함수형의 차이를 설명해주세요. 어떤 방식을 주로 사용하였고 그 이유가 뭔지 답변해주세요.
React 클래스형 컴포넌트 vs. 함수형 컴포넌트
클래스형 컴포넌트:
클래스로 정의되며, React.Component 클래스를 확장합니다.
render() 메소드를 포함하여 라이프사이클 메소드를 활용하여 컴포넌트를 정의합니다.
상태(state)와 생명주기 메소드를 사용하여 컴포넌트 로직을 관리합니다.
this 키워드를 사용하여 인스턴스 메소드 및 상태에 접근합니다.
클래스형 컴포넌트는 React 16.3 이전에 주로 사용되었습니다.
함수형 컴포넌트:
함수로 정의되며, 상태와 생명주기 메소드를 포함하지 않고 UI를 반환합니다.
React Hooks를 사용하여 상태(state) 및 생명주기와 관련된 기능을 함수형 컴포넌트에서 사용할 수 있게 되었습니다.
함수형 컴포넌트는 보다 간결하며 가독성이 높아지며, 함수의 특성 상 사이드 이펙트를 관리하기가 더 쉽습니다.
React 16.8 이후 Hooks 도입으로 인해 함수형 컴포넌트가 주로 사용되고 있습니다.
주로 사용되는 방식 및 이유:
현재는 주로 함수형 컴포넌트를 사용합니다.
이유:
가독성 및 간결성: 함수형 컴포넌트는 더 간결하며 가독성이 높아 코드 작성이 더 쉽습니다.
재사용성: Hooks를 통해 상태와 생명주기 관리가 함수 내에서 이루어지므로 컴포넌트의 재사용성이 향상됩니다.
테스트 용이성: 순수 함수로 구성되므로 테스트가 더 쉽고 예측 가능합니다.
성능 최적화: React 업데이트 최적화가 함수형 컴포넌트에서도 잘 동작하므로 성능에 문제가 없습니다.
Hooks: Hooks를 통해 상태와 생명주기 관리를 함수형 컴포넌트에서도 할 수 있게 되어 클래스형 컴포넌트와 비교해도 유지 및 보수가 더 편리합니다.
따라서 현재는 React의 함수형 컴포넌트와 Hooks를 주로 사용하는 경향이 있으며, 더 나은 코드 구성과 개발 효율성을 제공합니다.
