학습노트: React Hooks

최신 코드에서 React hooks를 많이 쓰고 있으니 공부를 하지 않고 넘어갈 수가 없는 노릇이다. 나온지 좀 되서 그런지 검색에서 얻은 문서들 수준이 높아서 한 번에 이해하기 어려운 글 들이 많았다.

좀 오래됐지만 비교적 원론적이며 기존 버전과이 차이를 중심으로 설명한 글이 있어서 이걸 보고 공부하기로 했다.

velog.io/@vies00/React-Hooks

React의 새로운 패러다임, React Hooks

배경

React component의 재사용성을 높이기 위해 만들었다고 한다. UI와 Lifecycle에 대한 의존성이 높기에 중복 코드가 종종 발생한다고 한다. 이것에 대한 해결을 위해 HOC(High order component)이 있었지만 해결이 쉽지 않았단다.

 

Hook: class 없이 state를 사용하는 기능 (기존에는 class에서만 state를 사용할 수 있었나? 그랬네. base class 상속으로 서비스를 제공해줬었나보군.) 단, class 내에서는 사용할 수 없단다

setState, componentDidMount 대신

state와 react lifecycle을 hook 할 수 있는 기능 제공한다.

 

1. State Hook: useState()

기존: class 내에서 this.state = {}; this.setState({});

Hooks: const [name, setName] = useState();

2. Effect Hook: useEffect()

기존: componentDidMount, ..DidUpdate, ..WillUnmount의 lifecycle callback들

Hooks: useEffect로 대체. useEffect(effect: EffectCallback, inputs?: InputIdentityList)

 

머리에 잘 들어오지 않는 예제가 하나 있다. 서버에서 data fetch하는 로직이라는데, 이게 asynchronous하게 동작을 한다는건가? condition이 바뀔 때마다 fetch가 다시 실행되고 useFetch가 또 업데이트 된다는건가? Contorol flow를 잘 모르겠다. Conditions는 갑자기 어디서 나온건가? 모르는 기초가 많아서 이해가 잘 안간다.

 

다음의 medium에 useMouseLocation이라는 custom hook이 있는데, useEffect를 이해하는데 참고할만 하다.

https://medium.com/@5066aman/how-to-write-90-cleaner-code-with-hooks-a3604116fb90

3. Custom Hooks

usePromise, useWindowMousePosition와 같은 오픈소스 훅이 있다고 한다. 모두 useState와 useEffect를 활용한 것이라고 한다.

https://www.hooks.guide 

nikgraf.github.io/react-hooks/

https://github.com/rehooks/awesome-react-hooks

 

여기서부터는 velog.io/@velopert/react-hooks를 공부한다. useState, useEffect만 있는게 아니다.

리액트의 Hooks 완벽 정복하기

4. useContext

함수형 콤포넌트에서 context를 쉽게 사용할 수 있단다. createContext 후 useContext를 사용하여 코드의 어디서든 사용할 수 있다. 테마 같은거에 주로 사용하는가보다.

5. useReducer

function reducer(state, action) {
  return { ...state };
}

위와 같은 reducer를 만들고 다음과 같이 사용한다.

const [state, dispatch] = useReducer(reducer, { value: 0 });
dispatch({ type: 'ACTION' });

더욱 괜찮은 건 action 값에 어떠한 객체도 다 허용한다는 것이다. 즉, e.target과 같은 이벤트 전달값들을 바로 사용할 수 있다.

function reducer(state, action) {
  return {
    ...state,
    [action.name]: action.value
  };
}

const onChange = e => {
  dispatch(e.target);
};

특히나 위와 같이 "[action.name]"을 사용하면 일일이 state 이름을 나열하지 않고 state를 업데이트 할 수도 있다. (initial state에 component name이 없으면 어떻게 되는거지?)

 

이렇게 store랑 분리해서 보니 엄청 간단하네. store와 redux는 일단 각자 다른 함수였구나?

6. useMemo

함수형 내부에서 발생하는 연산을 최적화 할 때 사용한다는데 예제 코드가 좀 길게 때문에 블로그 본문을 직접 참고하는게 낫겠다. "링크: velog.io/@velopert/react-hooks#5-usememo" (다른 페이지의 일부 구간만 레퍼런스 해주는 기능이 있으면 좋겠네. 일명 "인용" 매크로)

원래 사용하던 함수에 "useMemo(() =>"으로 wrapping만 해주면 된다.

7. useCallback

useMemo가 객체 재사용을 위한 것이라면, useCallback은 함수 재사용 훅이라고 한다.

8. useRef

앗! 점점 머리가 아파온다.

함수형 콤포넌트의 ref를 쉽게 사용할 수 있게 해준다는데, focus 이동이나 콤포넌트의 로컬 변수를 사용할 일이 있을 때 유용하단다. ref의 활용을 잘 몰라서 이해하지 못한 듯.

아무래도 useMemo 부터 useRef 까지는 실제 사례를 좀 더 경험한 후에 다시 봐야겠다. 지금 내 수준에선 무리인 듯.

9. usePromise

velopert가 만든 훅인 듯. 요긴하게 잘 써먹을 수 있겠다.

 

react-redux의 Hooks

(끝이 없군.)

velog.io/@velopert/react-redux-hooks

react-redux 에서 Hooks 사용하기

10. useSelector

위 useReducer만으로는 안되는건가? redux store에 접근하려면 useSelector를 사용해야 한단다.

const { a, b } = useSelector(state => ({ a: state.a, state.b }), [])

11. useStore, useDispatch

store의 기본 개념을 다시 정리해보자.

velog.io/@velopert/Redux-1-%EC%86%8C%EA%B0%9C-%EB%B0%8F-%EA%B0%9C%EB%85%90%EC%A0%95%EB%A6%AC-zxjlta8ywt

 

마지막으로..

Hook의 생태계 또한 어마무시한 듯.

https://www.hooks.guide

nikgraf.github.io/react-hooks/

https://github.com/rehooks/awesome-react-hooks