React Hook 제대로알고 쓰자!

먼저 리액트훅의 등장배경에 대해서 살펴보자

리액트 훅의 등장배경

리액트 컴포넌트는 클래스형 컴포넌트(Class Component)와 함수형 컴포넌트(Functional Component)로 나누어 짐니다.
실제로 리액트 개발을 경험 해보니 개발 방식은 기본적으로 함수형 컴포넌트를 주로 하여 코딩이 진행 됐습니다.

개발 시 화면 상태 변화, App Life Cycle 제어 등에 처리리는 클래스 컨포넌트 사용이 필수로 요구 되었으나.
react hooks 처리 등장으로 함수형 컴포넌트에서 클래스 컴포넌트의 작업을 할수 있게 되었습니다

클래스 형 컴포넌트의 단점

1. Logic의 재사용이 어렵습니다.
   클래스형 컴포넌트에서는 컴포넌트 자체를 재사용 할 수는 있지만
   Component class 부분적인 API 사용 및 state를 다루는 등의 처리에는 재사용에 제약이 따릅니다.

2. 코드가 길고 복잡해 진다.
   constructor, this, binding 등 기본 규칙을 따르지 않는 다면
   경고 메세지가 표현 되기도 하고, 컴파일이 진행 되지 않을 수도 있습니다.
   기본 규칙을 반드시 따라야 하기 때문에 코드가 복잡하고 길어집니다.

함수형 컴포넌트로 hook을 써서 대체하기

• 함수형 컴포넌트에서는 원하는 기능을 함수로 만든 후 필요한 곳에 넣어주기만 하면 되기 때문에 로직의 재사용이 유연해 집니다.
• 클래스형 컴포넌트가 가지고 있던 복잡성, 재사용성의 단점들까지 해결 됨니다.

2. Hook API

기본 Hook

• useState
• useEffect

  useEffect의 dependency에 대해서 좀 더 알아보자!
  https://gist.github.com/ninanung/0ea87bc3d14ed8b1f9e7488561a4b910
  useEffect는 리액트의 lifeCycle 을 참고하고 보면 도움 될 것 같다!
  https://react.vlpt.us/basic/25-lifecycle.html

• useContext

추가 Hooks

• useReducer
• useCallback
• useMemo
• useRef링크텍스트
• useImperativeHandle
• useLayoutEffect
• useDebugValue

---

사실 useSelector는 리덕스 훅이다..

• useSelector // useSelector값 메모이제이션 하기
  reselect
  reselect활용

성능최적화 하는방법