React Hooks를 배우기 전에 알면 좋은 것들

kyusung·2019년 6월 22일
0

React Hooks를 배우기 전에 알면 좋은 것들

React가 개선하려는 문제들 (Before v16.8)

  • 함수형 컴포넌트에서 상태가 필요한 경우가 발생
    • 상태가 필요한 경우, 클래스 컴포넌트로 변경하여야 한다.
  • 함수형 컴포넌트에서 라이프사이클이 필요한 경우가 발생
    • 라이프사이클이 필요한 경우, 클래스 컴포넌트로 변경하여야 한다.
  • 상태와 관련된 로직을 재사용하기가 어렵다.
  • 상태가 클래스 내부에 선언되고 관리되기 때문에 관련 로직을 재사용할 수가 없다.
    재사용 가능한 형태로 만드려면 render props, HOC를 사용해야 하는데, 여러개의 Wrapper를 사용하다보면 wrapper hell 을 보게된다.
  • 컴포넌트 내부가 복잡해져 이해하기가 어렵다.
  • 상태나 이벤트 관련 로직이 라이프사이클 메서드 내부에 들어가서 서로 상관관계가 없는 코드가 모여있게 된다. 이런 코드들은 이해하기도 어렵고 테스트하기도 어렵다.

Hooks를 사용하기 전에.

  • 기존 코드에 Hook이 필요가 없다면 Hook을 사용할 필요는 없다.
  • React에서 Class를 제거할 계획이 없다.
  • 페이스북에서도 수만개의 Class 컴포넌트를 작성했으며, 그들을 재작성할 계획이 없다.
  • Hook는 props, state, context, refs, 그리고 lifecycle와 같은 React 개념에 좀 더 직관적인 API를 제공한다.

Hooks 예제

Hooks example
useLocalStorage

Hooks 사용 규칙

  1. Hooks를 함수형 컴포넌트의 Top-level에서만 호출 해야 한다.
    반복문, 조건문, 중첩된 함수에서 호출하면 안 되고 오직 최상위 함수에서만 호출해야 한다.
  1. 오직 함수형 컴포넌트 에서만 Hooks를 호출해야 한다.
    일반 JavaScript 함수와 class에서는 Hooks를 호출해서는 안된다.

참고

https://velog.io/@velopert/react-hooks
https://hackernoon.com/why-react-hooks-a-developers-perspective-2aedb8511f38
https://john015.github.io/introducing-react-hooks
https://chatoo2412.github.io/javascript/react/react-hooks-overview/#
https://ko.reactjs.org/docs/hooks-intro.html
https://usehooks.com

0개의 댓글