react 클래스형과 함수형의 차이를 설명, 주로 사용하는 방식과 그 이유

❓정의 방식

- 클래스형: ES6의 클래스를 사용하여 컴포넌트를 정의함
- 함수형: 일반 함수 또는 화살표 함수를 사용하여 컴포넌트를 정의함

❓상태관리

- 클래스형: this.state와 this.setState()를 사용하여 상태를 관리합니다.
- 함수형: useState 훅을 사용하여 상태 관리함

❓생명주기 메서드

- 클래스형: 생명주기 메서드(componentDidMount, shouldComponentUpdate 등)를 사용할 수 있음
- 함수형: useEffect 훅을 사용하여 생명주기와 유사한 동작을 수행합니다.

❓this키워드

- 클래스형: this 키워드를 사용하여 클래스 인스턴스에 접근함. 이 때문에 메서드에 대한 바인딩 문제가 발생할 수 있음'
- 함수형: this 키워드가 없으며, 클로저를 통해 변수에 접근함

❓훅 사용

- 클래스형: React의 훅을 사용할 수 없음
- 함수형: 다양한 훅을 사용할 수 있음

❓코드 길이와 복잡성

- 클래스형: 생명주기 메서드와 상태 관리 때문에 코드가 길어질 수 있음
- 함수형: 보통 더 간결하고 명확한 코드를 작성할 수 있음

❓ 인스턴스 생성

- 클래스형: 컴포넌트가 렌더링 될 때마다 새로운 인스턴스가 생성됨
- 함수형: 인스턴스 생성 없이 함수만 호출됨

❓ 주로 사용하는 방식과 그 이유

- 과거에 React의 초기 버전에서는 클래스형 컴포넌트가 주된 방식. 이는 클래스형이 상태 관리와 생명주기 메서드를 제공했기 때문
- 최근에는 React 16.8에서 훅이 도입되면서 함수형 컴포넌트를 사용하는 것이 인기를 얻기 시작함
- 간결성: 함수형 컴포넌트는 대체로 코드가 더 간결함
- 재사용성: Custom Hooks를 통해 로직을 쉽게 재사용할 수 있습니다.
- 읽기 쉬움: 생명주기 메서드 없이도 상태 관리와 부작용을 처리할 수 있어 가독성이 높아짐

정의 방식에 있어서, 클래스형은 ES6의 클래스를 활용해 정의하는 반면, 함수형은 일반 함수나 화살표 함수로 정의됩니다.상태 관리에서, 클래스형은 this.state와 this.setState() 메서드로 상태를 관리합니다. 함수형은 useState 훅을 사용해 상태를 관리합니다.생명주기 메서드에 대해서, 클래스형은 componentDidMount나 shouldComponentUpdate와 같은 전통적인 생명주기 메서드를 활용합니다. 함수형에서는 이와 유사한 동작을 useEffect 훅을 통해 수행합니다.this 키워드의 사용에서 클래스형은 this를 사용해 클래스 인스턴스에 접근합니다. 이 때문에 바인딩 문제가 발생할 수 있습니다. 반면 함수형은 this를 사용하지 않고, 클로저를 통해 변수에 접근합니다.훅의 사용성 측면에서, 클래스형은 React의 훅을 사용할 수 없습니다. 함수형은 다양한 훅을 활용할 수 있습니다.코드의 길이와 복잡성에서는, 클래스형은 때로는 코드가 복잡해질 수 있습니다. 반면, 함수형은 간결하고 명확한 코드 작성이 가능합니다.마지막으로, 인스턴스 생성에서 클래스형은 컴포넌트 렌더링 시마다 새로운 인스턴스를 생성하는 반면, 함수형은 별도의 인스턴스 생성 없이 함수가 호출됩니다.
최근의 트렌드는 함수형 컴포넌트를 선호하는 방향으로 이동하고 있습니다. 특히 React 16.8에서 훅이 도입된 이후로 함수형 컴포넌트의 인기가 크게 상승했습니다. 이는 코드의 간결성, Custom Hooks를 통한 로직의 재사용성 및 생명주기 메서드 없이도 명확하게 상태 관리와 부작용 처리를 할 수 있어 가독성이 좋아진 점 때문입니다.