[리액트]클래스형 컴포넌트를 함수형 컴포넌트로 변환하기.

함수형 컴포넌트로 변환할 때 constructor, super, this.state는 더 이상 사용할 수 없고

대신, 함수형 컴포넌트는 useState와 같은 훅(hooks)을 사용하여 상태를 관리한다.

클래스형 컴포넌트 -> 함수형 컴포넌트 변환 예시

 

주요 차이점

1. 상태 초기화:
   • 클래스형 컴포넌트에서는 this.state를 constructor에서 초기화합니다.
   • 함수형 컴포넌트에서는 useState 훅을 사용하여 상태를 초기화합니다.
2. 상태 업데이트:
   • 클래스형 컴포넌트에서는 this.setState를 사용하여 상태를 업데이트합니다.
   • 함수형 컴포넌트에서는 setState 함수(useState에서 반환된)를 사용하여 상태를 업데이트합니다.
3. 이벤트 핸들러:
   • 클래스형 컴포넌트에서는 메서드에서 this를 사용합니다.
   • 함수형 컴포넌트에서는 함수 내부에서 상태와 함수를 직접 호출합니다.

요약

• 함수형 컴포넌트에서는 constructor, super, this.state를 사용할 수 없습니다.
• 상태 관리를 위해 useState 훅을 사용합니다.
• 이벤트 핸들러 및 기타 메서드는 함수로 정의하며, this를 사용하지 않습니다.