오늘 배운 것들

• useAsync hook
• useHotkey hook
• Modal component

useAsync hook

• useAsync hook은 데이터를 fetch하여 받아올 때 사용할 수 있는 hook이다. 데이터가 받아올 때 로딩중임을 알 수 있도록 isLoading, 그리고 fetch 후에 받을 수 있는 데이터와 에러들을 useState에 넣어주었다.
• 해당 과정에서 이슈가 있었는데, 함수 형식을 콜백 함수를 () ⇒ callback() 형식으로 넣어주면 동작하지 않았다. callback처럼 인자로 직접 넣어 주어야 동작한다.
• 일단 원인이 무엇인지는 알았지만, 아직 어떤식으로 고쳐야 할 지는 고려하지 못했다.
• 다만, 보통 데이터를 불러오는 과정 useQuery나 useSwr 같은 외부 라이브러리로 상태를 관리하므로, 실무에서 사용하는 빈도는 적을 것이라고 생각한다.

useHotkey hook

• useHotKey hook은 하나 이상의 키를 눌렀을 때 단축키처럼 동작할 수 있도록 만든 hook이다.
• 단순히 코드를 따라쳐봤음에도 불구하고 모든 키들의 alias를 작성해주어야 하고, 내부적으로 처리할 것이 많은 hook이라고 생각했다. 실제 키의 맵핑 과정이 매우 복잡하기 때문에 hook을 사용하여 로직을 재사용할 수 있다는 사실이 매우 반갑게 들린다.
• 다만 로직 흐름이 따라가기 어려울 뿐이지, 에러 핸들링 자체는 useAsync hook보다 쉬웠다. useAsync hook은 useCallback의 deps를 외부에서 정의하여 prop으로 전달한다. 근데 난 이 방식이 좋은 방식인지 잘 모르겠다. 이 방식이 최선이 아닌 것 같다고 생각이 들어, 혹시 다른 좋은 방법이 있는지 찾아봐야겠다.
• 흐름을 따라가면서 다시 한 번 useHotkey hook을 작성해봐야겠다.

Modal Component

• 모달 컴포넌트를 만들었다. 모달 컴포넌트는 alert 대신에 사용할 수 있는 UI로, 사용자에게 어떤 것을 강조하고 싶을 때 사용하는 컴포넌트이다.
• vue와 마찬가지로, Modal 컴포넌트가 다른 컴포넌트의 자식에 위치한다면 다른 컴포넌트의 스타일에 막혀서 의도하지 않는 스타일을 갖게 될 수 있다. vue 처럼 react 역시 해당 컴포넌트를 가장 최상단에 위치시킬 수 있는 메서드를 제공한다.
• React.createPortal은 가장 상단에 위치시킬 수 있는 방법이다. 다만 이 방법을 사용하기 위해서는 실제 dom의 reference가 필요한데, 그렇기 때문에 useMemo로 document.createElement(’div’) 계산된 값을 저장하여 사용할 수 있다.
• useEffect로 side effect를 처리함에 주의하자!

useEffect(() => {
    document.body.appendChild(el);
    return () => {
      document.body.removeChild(el);
    };
  }, [el]);

느낀 점

• 강의 양은 더 많았지만, 많이 공부하지는 못했다. 오늘은 리액트 관련 스터디가 있어서 해당 스터디를 준비했다.
• 스터디에 회의를 가지는 팀원이 있었으나, 스터디 방식을 바꾸어서 면접 방식이 아닌 토론 방식으로 스터디를 진행했고, 모든 팀원들에게 좋은 반응을 얻었다. 각자 깊게 준비한 영역이 다르기 때문에, 의견을 교환하면서 서로 몰랐던 정보도 알아가고, 서로 잘못된 정보도 고쳐주는 아주 좋은 방식의 스터디였다. 우리 팀은 종종 이런 방식으로 스터디를 진행해보기로 했다.
• 요 며칠 공부 시간을 조금 줄이고, 잘 쉰 덕분에 컨디션이 잘 회복된 것 같아 기분이 좋다. 팀 프로젝트를 시작하기 전 까지는 좀 잘 쉬어서 최상의 컨디션으로 프로젝트에 임해야겠다.