1.3 과제를 되돌아 보자면,
그때 처음에 과제할 때도, 그랬지만 지금 다시 풀어도 나는 왜 훅을 그렇게 개발하면서 맨날 사용하면서 그 내부의 원리를 파악한다던지 이런 생각을 안했을까 되돌아 보게 된다. 훅을 사용하는 만큼 훅에 대해서 알면서 알수록 더 사용하기 쉬어질지도, 혹은 더 잘 사용하게 될지도 모르는데 말이다.
반성하는 말로 서두를 시작하게 된다.
1.3 과제 톺아보기!
이번 과제는
일단 useState를 가지고 여러 훅을 만들어보는 거였다.
게다가 훅을 만들 때 보니 모든 것의 기초는 당연하게도 useState였는데 평소에는 그런 건 생각하지 않고 훅을 가지고 원하는 곳에 사용하다 보니 개념이 좀 흐릿한 훅이 있었는데 하다보니까 왜 이런 훅을 이런 곳에서 사용할 수 있기도 했다.
나한테 대표적인 건
useRef
였다.
나는 useRef를 사용할 때 보통은 input에 포커스 갈 때 사용한다. 이런 동작들 위주로만 생각해서 사용한다고 생각했고 그것도 맞긴 하지만 useRef가 기본적으로 어떤 곳에서 사용해야 하는지에 대한 기본적인 개념이 좀 부족하다고 생각했다.
보통 useState는 상태관리를 위해 사용하며 그 상태가 바뀌면 당연히 리렌더링도 이루어진다.
useRef를 직접 만들어보면서 이해하게 된 점은 usestate와 달리
- 리렌더링을 원하지 않지만, 동작은 하기를 원할 때
그래서 input같은 포커스를 줄 때 혹은 드래그 할 때 사용하기 좋은 게useRef인 것이다. - 값은 저장하돼, 리렌더링이 되지 않는 조용한 저장을 원할 때 써먹을 수 있는 부분이다. 이런 useRef를 활용해서
useMemo나usecallback에 사용하기 좋다. 혹은 화면에 렌더링할 필요가 없다면 데이터를 저장할 때 대안으로 될 수 있다는 게 흥미롭다.
만들어본 것 중에 가장 신세계였던건?
useAutoCallback
였던 듯 하다.
좀 재밌었던 건,
usecallback으로 deps를 관리하는 건 항상 귀찮은 일이었다.
하지만, 이 커스텀 훅을 통해서 자동으로 deps 관리를 할 수 있도록 만들어 본 건 재밌는 일이었다.
특히나 앞에서 내가 만들었던 useRef의 조용한 저장과 usecallback의 리렌더링 방지를 조합해서 만들어 보는 건, 그 때도 만들어보면서도 감탄했다.
이런 훅을 만들 수도 있는 거였구나! 하고 말이다.
그래서 비유적으로 이해할 때 배의 닻을 고정할 수 있는 건 usecallback 이고, 배 안의 물건들이 계속 바뀔 수 있는 건 useRef으로 이해하였다.
그 외에 만들었던 것 중에서는 음...
useStorage와 useStore를 만들고도 이건 뭘 위해 만든 것인지 생각해보게 됐다.
만들 때, 과제니까 너무 생각없이 만든 것도 있는 것 같다.
useStorage 의 경우,
우리가 만들 때 localStorage.getItem와 같은 코드를 줄이고, localStorage와 리액트의 중간다리 역할을 useSyncExternalStore에게 시킴으로써 외부 상태 관리를 패턴화시키는데 의의가 있달까.
아무래도 우리는 실제로 페이지를 만들어 보면 알겠지만, 인증을 사용해서 토큰을 가져오면 어찌됐든 우리는 토큰을 어딘가에는 저장할 공간이 필요하다.
그럴 때 많이 사용하는데 중에 하나가 storage를 사용하는 것이다. 그렇다 보면 storage에서 저장해놓고 get해와서 많이 사용하게 되는데, 그럴 때 사용하게 된다면 매우 유용하게 사용될 수 있을 것 같다.
useStore 의 경우,
무엇을 위해 만드는 걸까 싶었는데, 여기 또한 useSyncExternalStore가 중간 다리 역할을 하여 리액트와 store를 이어주어, Zustand처럼 전역에서 데이터를 내려주어 접근할 수 있게 만든 것인데 Zustand보다는 더 간단하게 만들어 볼 수 있는 것이다. 아 물론 Zustand가 라이브러리니까 더 집약적이고 더 잘 만들었겠지만, 이걸 통해서 Zustand 쓰지 않고도 이렇게 만들어 볼 수도 있겠구나 싶어서 좀 흥미롭게 느껴졌다.
과제를 마무리 하면서,
초반에는 실제 사용하는 훅들을 다시 만들어보면서 딥다이브?도 좀 해보고...
(그전에는 훅을 한번도 까본적 없으니까 나한테는 딥다이브가 맞다!!)
과제를 통해 useSyncExternalStore 이라는 것도 존재하는 것을
처음 알게 되었다.
기존에 문제가 되지 않았지만, React 18부터 우선순위를 기준으로 처리하기 때문에 현재 처리 중인 걸 중단하고 우선 순위가 높은 걸 먼저 처리할 수 있게 되면서, 외부 상태와 내부 상태가 동기화되지 않아서 이를 위해 새로 만들어졌다는 것도 과제를 하면서 새롭게 알게 됐다.
이렇게 새롭게 알게 된 건 재밌는 일이지만, React를 쓰면서도 몰랐다니 반성할 거리 투성이다!!!
또한 과제할 때는 하느냐 정신 없어서 이런 훅은 왜 필요한가, useSyncExternalStore에 대해서는 무엇인지 개념에 대해서는 제대로 모르고, 그냥 만들었던 게 아쉬운 점이다.
그래서 이렇게 복습하는 게 한 편으로는 다행이라고 생각한다.
복습이라는 걸 하고 있어서 말이다. (복습을 통해 블로그글 쓰는 것도 다행!!!)
