[React - 기초] Hooks

1. Hooks? 

Class 컴포넌트의 단점을 보완하면서 라이프사이클 등과 관련된 함수를 재사용 가능하게 함

 

Class 컴포넌트의 단점으론 

1. 컴포넌트 사이에서 상태 로직을 재사용하기 어렵다.

   Class 컴포넌트의 로직을 재사용하는 방법은 불가능한 것은 아니다. 하지만 render props, 고차 컴포넌트 같은 
   패턴을 사용해서 해결해야 했다. 

   그래서 Hook은 좀 더 편하게 상태 로직을 재사용할 수 있도록 도와준다. 

 

2. 복잡한 컴포넌트들은 이해하기 어렵다. 

   데이터를 가지고 오는 작업을 componentDidMount에서 일어날 때가 있고 componentDidUpdate에서 일어날 때가
   있었다. 즉, 관련이 있는 코드는 분리되지만, 관련 없는 코드들은 단일 메서드로 결합되어있다. 
   그것으로 인해서 버그가 쉽게 발생하고, 무결성을 쉽게 해친다. 

 

   그래서 Hook을 통해 비슷한 기능을 하는 작은 함수의 묶음으로 컴포넌트를 나누는 방법을 사용할 수 있다. 

 

3. Class는 기계와 사람을 모두 혼동시킨다. 

   React에서 Class 사용을 위해서는 JavaScript의 this 키워드가 어떻게 작동하는지 알아야 한다. 
   하지만 JavaScript의 this 키워드는 대부분의 언어와 다르게 작동하기 때문에 사용자에게 큰 혼란을 주었다. 
   또한 Class는 핫 리로딩을 깨지기 쉽고 신뢰할 수 없게 만든다. 

   그래서 Hook은 Class없이 React 기능을 사용하는 방법을 제공한다. 

 

※ Javascript의 this?

Javascript에서 함수의 this 키워드는 함수를 호출하는 방법에 의해 결정된다. 

 

2. Hooks Overview 

Hook 사용 규칙 

Hook은 JavaScript 함수지만, 두 가지 규칙을 준수해야 한다. 

- 최상위(at the top level)에서만 Hook을 호출해야한다. => 반복문, 조건문, 중첩된 함수에서 Hook을 실행하면 안된다.

- React 함수 컴포넌트 내에서만 Hook을 호출해야 한다. 일반 JavaScript 함수에서는 Hook을 호출해서는 안 된다. 

  (다만, Custom Hooks 에서는 존재할 수 있다. ) 

 

useEffect

데이터 가져오기, 구독(subscription) 설정하기, 수동으로 리액트 컴포넌트의 DOM을 수정하는 것까지 이 모든 것이 

side effects이다. 

 

React Class 생명주기 메서드에서의 componentDidMount와 componentsDidUpdate,
componentWillUnmount가 합친 것으로 이해하면 된다.