라이프 사이클(함수형과 클래스형)

함수형

• JSX를 return문을 사용해서 반환
• state를 사용할 수 없다
• 생명 주기 함수를 작성할 수 없다

클래스형

• class 키워드로 시작
• Component로 상속 받음
• render() 함수를 사용해서 JSX를 반환
• props를 조회할 때 this 키워드 사용

클래스형, 함수형컴포넌트와 차이

• 클래스형

1. state, lifeCycle 관련 기능사용 가능
2. 메모리 자원을 함수형 컴포넌트보다 조금 더 사용
3. 임의 메서드를 정의

• 함수형

1. state, lifeCycle 관련 기능사용 불가(Hook으로 대체)
2. 메모리 자원을 클래스형보다 적게 사용한다!
3. 컴포넌트 선언이 쉬움

클래스형 라이프 사이클

함수형 라이프 사이클

React Hooks

React Hook은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능

• 기본 Hooks
  - useState (동적 상태 관리)
  - useEffect (side effect 수행 -mount/unmount/update)
  - useContext (컴포넌트를 중첩하지 않고도 전역 값 쉽게 관리)
• 추가 Hooks
  - useReducer (복잡한 컴포넌트들의 state를 관리 -분리)
  - useCallback (특정 함수 재사용)
  - useMemo (연산한 값 재사용)
  - useRef (DOM선택, 컴포넌트 안에서 조회/수정할 수 있는 변수 관리)
  - useImperativeHandle (ref를 사용할 때 부모 컴포넌트에 노출되는 인스턴스 값을 사용자화, forwardRef 사용)
  - useLayoutEffect (동기적으로 실행되고 내부의 코드가 모두 실행된 후 painting 작업을 거칩니다. 따라서 로직이 복잡할 경우 사용자가 레이아웃을 보는데까지 시간이 오래걸린다는 단점이 있어, 기본적으로는 항상 useEffect 만을 사용하는 것을 권장)
  - useDebugValue (커스텀 훅 안에서 훅을 사용하면 리액트 개발자 도구에 풍부한 정보 제공)