라이프사이클(클래스형 vs 함수형), react hooks

React에서는 주로 두 가지 유형의 컴포넌트를 사용

1. 클래스형 컴포넌트(Class Components): 클래스형 컴포넌트는 ES6 클래스를 사용하여 정의되며, React.Component를 상속받는다. 라이프사이클 메소드를 사용할 수 있으며, 내부 상태를 가질 수 있다. 클래스형 컴포넌트의 주요 라이프사이클 메소드는 다음과 같다.
   • constructor: 컴포넌트 생성 시 호출
   • componentDidMount: 컴포넌트가 DOM에 마운트 된 직후 호출
   • componentDidUpdate: 컴포넌트가 업데이트 된 후 호출
   • componentWillUnmount: 컴포넌트가 언마운트되고 파괴되기 직전 호출
   • shouldComponentUpdate: 컴포넌트가 업데이트되기 전 호출, false를 반환하면 해당 업데이트를 취소
2. 함수형 컴포넌트(Functional Components): 함수형 컴포넌트는 단순한 함수로 정의되며, 라이프사이클 메소드를 사용할 수 없지만 React Hooks를 사용할 수 있다. 함수형 컴포넌트는 보통 간단한 컴포넌트를 만드는 데 사용되며, 코드 가독성과 유지 보수성이 좋다는 장점이 있다.
3. React Hooks는 함수형 컴포넌트에서도 상태 관리 및 라이프사이클 기능을 사용할 수 있게 해주는 기능
   • useState: 컴포넌트의 상태를 관리할 수 있게 해주는Hook
   • useEffect: 라이프사이클 메소드와 유사한 기능을 수행하는 Hook, componentDidMount, componentDidUpdate, componentWillUnmount와 같은 기능을 수행
   • useContext: 컴포넌트에서 Context를 사용할 수 있게 해주는 Hook
   • useReducer: 복잡한 상태 관리를 위한 Hook, Redux와 유사한 방식으로 상태를 관리
   • useCallback: 함수를 메모이제이션하여 불필요한 렌더링을 줄여주는 Hook
   • useMemo: 계산량이 많은 함수의 반환값을 메모이제이션하여 성능 최적화를 돕는 Hook
   • useRef: DOM 엘리먼트에 대한 참조를 생성하고 관리하는 Hook
   • custom Hooks: 개발자가 만든 사용자 정의 Hooks