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

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

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

• 함수형 컴포넌트에서 상태가 필요한 경우가 발생
  • 상태가 필요한 경우, 클래스 컴포넌트로 변경하여야 한다.
• 함수형 컴포넌트에서 라이프사이클이 필요한 경우가 발생
  • 라이프사이클이 필요한 경우, 클래스 컴포넌트로 변경하여야 한다.
• 상태와 관련된 로직을 재사용하기가 어렵다.

• 상태가 클래스 내부에 선언되고 관리되기 때문에 관련 로직을 재사용할 수가 없다.
  재사용 가능한 형태로 만드려면 render props, HOC를 사용해야 하는데, 여러개의 Wrapper를 사용하다보면 wrapper hell 을 보게된다.

 export default withTheme(withComment(withLike(Component))));

• 컴포넌트 내부가 복잡해져 이해하기가 어렵다.

• 상태나 이벤트 관련 로직이 라이프사이클 메서드 내부에 들어가서 서로 상관관계가 없는 코드가 모여있게 된다. 이런 코드들은 이해하기도 어렵고 테스트하기도 어렵다.

componentDidMount () {
  fetchLikes().then(({ likes, likedByMySelf }) => {
    this.setState({ likes, likedByMySelf })
  });
  
  fetchComments().thne(comments => {
 	this.setState({ comments })
  });
     
  window.addEventListener('resize', this.onHandleResize);
}

Hooks를 사용하기 전에.

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

Hooks 예제

Hooks example
useLocalStorage

Hooks 사용 규칙

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

import React, { useState } from 'react'
function Counter () {
  // ① OK
  const [count, setCount] = useState(0)

  // ② X 반복문
  for (let i = 0; i < 10; i++) {
    var [count2, setCount2] = useState(0)
  }

  // ③ X 조건문
  if (true) {
    var [count3, setCount3] = useState(0)
  }

  // ④ X 중첩된 함수
  function innerFnc () {
    const [count4, setCount4] = useState(0)
  }
  ...
}

2. 오직 함수형 컴포넌트 에서만 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