[Frontend 기술면접 top30] react 클래스형과 함수형의 차이를 설명해주세요. 어떤 방식을 주로 사용하였고 그 이유가 뭔지 답변해주세요.

react 클래스형

class 키워드를 사용해 컴포넌트를 정의하고, render() 메서드 내에서 JSX를 반환합니다. this.state와 this.setState를 사용해 컴포넌트의 상태를 관리합니다. 또한 라이프사이클 메서드들을 통해 컴포넌트의 생명 주기를 제어할 수 있습니다.

react 함수형

단순한 함수 형태로 컴포넌트를 정의하며, 함수의 반환값으로 JSX를 반환합니다. 리액트 훅을 사용해 상태와 라이프사이클 기능을 수행합니다. 이는 함수형 컴포넌트의 가장 큰 특징 중 하나입니다. 클래스형 함수와 비교했을 때 코드가 더 간결하고 읽기 쉽습니다.

어떤 방식을 주로 사용하였고 그 이유가 뭔가요?

함수형 컴포넌트를 주로 사용합니다. 함수형 컴포넌트와 훅을 사용하면 코드가 더 간결하고, 컴포넌트의 재사용성과 조합성이 높아집니다. 클래스형 컴포넌트의 라이프사이클 메서드는 때때로 복잡해질 수 있는데, useEffect와 같은 훅을 사용하면 이러한 복잡성을 줄일 수 있습니다.