리액트 컴포넌트와 훅

컴포넌트

클래스형 컴포넌트는 코드 안에 라이프 사이클 기능과 상태 관리 기능이 구현됨

함수형 컴포넌트는 hook을 사용하여 라이프 사이클 기능과 상태 관리 기능을 구현함.

클래스형 컴포넌트
- LifeCycle 관리가 쉬움
- constructor, this, binding과 같은 여러 규칙을 따라야 함
  
  ⇒ 코드 가독성 저하
- 특정 DOM 처리나 API 호출, 상태 관리 같은 로직의 재사용이 제한적
  
  ⇒ 로직 재사용의 어려움
함수형 컴포넌트
- hook을 사용하여 라이프사이클 기능과 state 기능을 구현함.
  
  ⇒ 코드 가독성이 크게 증가
- 필요한 로직을 커스텀 훅으로 만들고 이를 필요한 곳에 삽입
  
  ⇒ 로직 재사용성 향상, 직관적이고 효율적인 컴포넌트 구조

왜 함수형 컴포넌트?

선언하기 편함
- 클래스형은 class, render 함수, 상속, constructor, 생성자 메소드 등 선언해야 할 것이 많음
직관적이고 가벼우며, 번들 크기가 더 작음
- 기본 변수(상태)와 생명주기가 없음
render 함수 필요 없고 JSX 리턴

⇒ 컴포넌트 마운트 속도가 더 빠름

훅

from React 16.8 ~
클래스형 컴포넌트의 단점에도 불구하고 사용했던 이유는 상태관리와 라이프 사이클 기능의 사용 때문이었음
hook의 등장으로 인해 함수형 컴포넌트에서도 아래 작업들을 할 수 있게 됨
- 클래스 컴포넌트의 라이프사이클이나 상태 관리 등의 기능

일반 함수와 리액트 훅의 차이

일반 함수 : 단순히 특정 로직을 수행하고 결과를 반환함
리액트 훅 : react의 상태 및 life-cycle 관리
- useState, useEffect, useContext

훅의 3원칙

컴포넌트의 영역 안에서만 작동한다!
- 함수컴포넌트/커스텀훅 내부에서만 호출해야 한다!
기능을 여러 훅으로 나누면 좋다!
- 나누어 있어도 컴포넌트에서 한번에 순차 호출
- 함수형 컴포넌트 ⇒ 함수 ⇒ 기능 단위 분리 ⇒ 가독성 ⇒ 테스트 및 유지보수에 유리
최상위 레이어에서만 호출해야 한다!
- 블록 내부에서는 호출할 수 없다!

훅의 장점

코드 간결성
재사용성
컴포넌트 분리
- 상태 관리 로직을 컴포넌트에서 분리하여 더욱 독립적인 함수로
- 즉, 컴포넌트는 더욱 재사용 가능하고 테스트하기 쉬운 구조로 됨
라이프사이클 메서드 문제 해결
- 클래스 컴포넌트에서는 관련 있는 코드가 여러 메서드에 분산될 수 이 있음
  
  ⇒ 코드의 일관성을 유지하거나 버그를 잡기 어려울 수 있음
- 훅을 사용할 경우, 이러한 문제를 해결하고 관련 있는 코드를 하나로 묶을 수 있음

훅의 종류

상태관리 hooks
- useState
- useEffect
- useContext
시점 hooks
- useLayoutEffect (render후, sync)
- useEffect (paint후, async)
메모화 hooks
- useMemo
- useCallback
- memo
그 외 hooks
- useRef, useImperativeHandle
- useDebugValue, useId

42584 Usecontext