React Hook에 대한 탐구

무슨 일이 있었는지는 저번 포스팅에 있고,
아무튼 그래서 이러쿵저러쿵 Hook을 공부해보기로 했다.

---

금쪽같은 class를 냅두고 왜 Hook을 왜 쓰는 걸까?

React 문서 > Hook > 1. Hook 소개 페이지에서는 이렇게 설명하고 있다.

https://ko.reactjs.org/docs/hooks-intro.html

Hook의 개요 – React

1. 여러 개념들에 대해 더 직관적으로 접근할 수 있다.

2. State관리를 위하여 복잡하게 컴포넌트를 Wrap할 필요가 없다.

3. 기존 클래스 컴포넌트의 LifeCycle이 복잡하다.

4. JavaScript의 클래스와 this 키워드의 사용이 복잡하다.

---

그래서 Hook이 뭘까?

Hook의 사용법을 먼저 배운 사람들은, Hook이 함수 컴포넌트를 말하는 것이라고 생각할 수 있다.

여기 Hook 설명서의 구절을 보자.

Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다.

즉, useState, useEffect와 같은 함수들이 곧 Hook이다.

이런 Hook을 사용하면서 클래스 컴포넌트를 더이상 사용하지 않아도 되는 것 뿐이다.

그래서 Hook이 뭐냐?

Hook은 state와 같은 로직을 관리하는 모듈이라고 볼 수 있다.

예를 들어 useState는 state를 저장하고, state가 변경되었을 때 re-render하는 로직을 처리한다.
useEffect는 컴포넌트가 render될 때마다 호출이 되는 로직이다.

---

Hook의 작동원리

다음과 같은 코드가 있다고 생각해보자.

const component = (props) => {
  const [state, setState] = useState(0);
  
  return (
  	<button onClick={setState(state + 1)} />
  );
}

자, 이제 이 코드를 React가 아니라, 일반 JavsScript 함수라고 생각을 해보자.
그러면 어떻게될까?
호출할 때마다 같은 일을 하는 것처럼 보인다.

하지만 실제로는 재호출 되었을 때 결과가 달라질 수 있다.

왜냐하면 state와 setState가 useState의 반환값이기 때문이다.
이게 무슨 소리냐면, useState가 다른 값을 반환하면 결과도 달라지기 때문이다!

변한 state의 값은 React가 관리하며 함수가 호출 될 때마다 다른 값(혹은 같은 값)을 반환해 주는 것이다.

---

그렇다면 React는 어떻게 state값을 반환해주는걸까?

그러면 이런 의문이 생길 수 있다.

세 파일에 각각 React Component A, B, C가 있다. 셋 다 useState를 사용하면,
React는 어떻게 셋을 구분해서 다른 값을 줄까?

그에 대한 해답은 이 링크에 있다.

https://ko.reactjs.org/docs/hooks-faq.html#how-does-react-associate-hook-calls-with-components

Hook 자주 묻는 질문 – React

 

React에는 각 컴포넌트에 대한 메모리 셀의 내부 목록이 있다.

그래서 useState를 호출 할 때마다 다음 포인터로 넘어가는 형식이다.

만약 A->B->C의 순서로 Hook이 호출되었다면, 이걸 memory = [A, B, C]와 같이 순차적으로 저장한다
(실제로는 배열이 아닙니다. 예시를 위한 것)

그런 다음 A, B, C에서 각각 Hook을 호출 할 때마다 순서에 맞는 값을 반환하는 것이다.
처음 호출이면 memory[0], 두번째는 memory[1], 세번째는 memory[2].

---

그렇기에 주의해야 할 점 (Error: Should Hava a Queue)

이전 포스팅에서 다뤘지만, 위와 같이 순차적인 형식으로 구성이 되어있기 때문에,
중간에 하나라도 빠지면 안 된다.

예를 들어 B가 어떤 이유로 Hook을 호출하지 않는다면,
C가 두번째로 Hook을 호출하게 되면서 B의 state를 받게 된다.

그렇기 때문에 항상 Hook이 조건 없이 호출되는가에 대해 신경을 써야 한다.