React Hooks에 대해 제대로 알아보기 + Custom hooks 는 대체뭣인가?

지금 Real app이코드를 분석하면서 제대로된 앱의 구조가 어떤지를 보는데, 여기서 lib > hooks 구조를 사용하고 있다. Hooks 를 매번 사용하면서도 대강만 아는 느낌이라 이번 기회에 정리를 해보려고 

 

reactjs.org/docs/hooks-intro.html

Introducing Hooks – React

 

얘를 읽는다. 

 

1. Introducing Hooks

우선 Hooks는 React 16.8에서 도입됬다. 원래 그전에는 함수형 컴포넌트는 상태를 가지지 않는 그저 순수함수였다고 한다. (올해 처음 React를 배웠을땐, 이런 망측한 것이 있을까, 하고 놀랬었다.. 하지만 함수형으로 할수있어 요새는 웃으며 산다 ㅎㅎ)

 

클래스도 React에서 없앨건 아니라긴한데, 함수형으로 계속 가는 분위기. 

 

Hooks는 React의 컨셉을 여전히 유지한다. props, state context, refs, lifecycle에 대해서 여전히 잘알아야한다. 

 

"It's hard to reuse stateful logic between components"  hooks를 통하면 stateful 한 로직을 컴포넌트 지배관계를 안바꾸고도 재사용 가능하다. 이건 커스텀 훅스에서 더 자세히 다룬다고 한다. 

 

2. Hooks at a Glance

// UseState

useState(initialState) {
  var dispatcher = resolveDispatcher();
  return dispatcher.useState(initialState);
}

useState 동작원리를 찾아봤다. 

stackoverflow.com/questions/53974865/how-do-react-hooks-determine-the-component-that-they-are-for

How do react hooks determine the component that they are for?

 

솔직히 뭔소린지 모르겠고, 어떻게 useState를 통해서 어떤 컴포넌트가 rerender될지 결정하는지 로직은 천천히 이해해봐야겠다. 

 

 

Built in Hooks 의 종류

- State Hook: useState

- Effect Hook: useEffect

- other hooks: useContext, useReducer

 

Building your own Hooks

- stateful 로직을 재사용하고 싶을 때 사용. (기존 방식: reactjs.org/docs/higher-order-components.html)

- 반드시 use로 시작해야함! useSomething! 

import React, { useState, useEffect } from "react";
import "./styles.css";

function Test(props) {
  console.log("rerender");
  useEffect(() => {
    console.log("Test, useEffect");
  }, [props.count]);
  return <div>Test count1</div>;
}

export default function App() {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);

  return (
    <div className="App">
      <button onClick={() => setCount1(count1 + 1)}>count1</button>
      <button onClick={() => setCount2(count2 + 1)}>count2</button>
      <Test count={count1} />
    </div>
  );
}

useEffect는 기본으로 렌더링

count1을 눌렀을때

 

count2를 선택하면 useEffect가 동작안한다. 

 

3. Using the State Hook

4. Using the Effect Hook

5. Rules of Hooks

6. Building your own Hooks

custom hooks끼리는 state를 공유하지 않는다. 

 

 

7. Hooks API Reference

reactjs.org/docs/hooks-reference.html#usecontext

 

- useMemo관련 짱 좋은 글: www.daleseo.com/react-hooks-use-memo/

React Hooks: useMemo 사용법

- useRef 사용예제: react.vlpt.us/basic/10-useRef.html

10. useRef 로 특정 DOM 선택하기 · GitBook

- useCallback: react.vlpt.us/basic/18-useCallback.html

18. useCallback 를 사용하여 함수 재사용하기 · GitBook

useCallback은 useMemo를 기반으로 만들어졌고, 특정함수를 재사용하고 싶을때 사용

 

 

8. Hooks FAQ