WIL- 3주차 (Custom Hook)

이번 3주차의 내용 주제는 Custom Hook이다.

1. 언제 커스텀 훅으로 추출하는가?

1. 반복되는 조합: 같은 상태 + 로직 조합이 2곳 이상에서 반복될 때

2. JSX와 무관한 로직 : 컴포넌트의 JSX와 무관한 로직이 컴포넌트를 크게 차지할 때

3. 테스트 하고 싶을 때 : 테스트 하고 싶은 로직이 컴포넌트에 묶여있을 때

4. 하나의 흐름 : API 호출, 필터, 페이지네이션, 검색, validation 처럼 한 흐름으로 설명되는 동작

2. 좋은 Hook은 한 문장으로 설명된다. (이름에서 드러난다.)

3. 역할별 hook으로 나누고 컴포넌트에서 조합해서 쓴다.

function OrderHistoryPage(){
 const statusFilter= useOrderStatusFilter();
 const dateRange = useDateRangeFilter();
 const search = useOrderSearch();
 const pagination = usePagination();
 
 const ordersQuery = useOrders({ 
  status: statusFilter.status,
  from : dateRange.from,
  to : dateRange.to,
  q: search.debounceQuery,
  page: pagination.page
 });
 
 return (
  <OrderHistoryView
   statusFilter = {statusFilter}
   dateRange= {dateRange}
   search = {search}
   pagination = {pagination}
   ordersQuery = {ordersQuery}
  />

4. useEffect 필요한 경우 vs 없는 경우

필요한 경우 
1. 서버 api 요청 
2. 브라우저 api 구독
3. websocket 연결
4. 타이머 설정 
5. 외부 라이브러리와 동기화 

필요 없는 경우 
1. props/state로부터 계산 가능한 값
2. 필터링 / 정렬 / 검색 결과 계산
3. 상태 라벨 포맷팅
4. 주문 경과일 계산
5. 렌더링 중 구할 수 있는 파생값

이번주차를 들으며 느낀 점은
리액트의 생태계에 묶여있는 로직들을 하나의 책임을 가지는 커스텀 훅으로 잘 이쁘게 빼내서 만든다음
컴포넌트 단에서 이 커스텀 훅들을 가져다 쓰면 더욱 읽기 쉬운 로직이 될 수도 있겠다 라고 생각을 하였다.

사실 코드도 글과 같다 생각을 하는데 예를 들어 다음과 같은 글을 읽어보면

나는 어제 밤에 알람을 다음날 오전 10시에 맞춰두고는 다음날 오전 10시에 알람 소리가 들려서 시간에 맞추어 일어났어. 
그리고 후라이팬에 기름을 둘러 계란 후라이 3장을 굽고 토스트 빵 3쌍을 구워서 케찹을 둘러 토스트 3개를 만든다음 맛있게 먹었지.  

이것 보단

나는 오늘 오전 10시에 알람소리를 듣고 일어났어. 그리고 토스트를 만들어 먹었지. 

이런 문장이 더 읽기 쉽지 않을까?
(알람을 어떻게 맞추었는지, 토스트를 어떻게 만들었는지는 hook으로~~)