Jooeun's TIL

# 2023 4월 TIL

# 2023.04.11

# Overview

  • 에디터 리팩토링 진행 중
  • 복잡도가 높은 제품을 어떻게 하면 조금 더 읽기 좋은 코드로 작성할 수 있을까 고민 중
  • 취미 목적의 독서 모임을 하나 시작했다.

# Next.js 환경에서 MSW 세팅

// _app.tsx
// isTest()와 isDev()는 환경 변수 관련 유틸에서 import하여 쓰는 함수
// init 시점의 환경 변수를 읽어와 현재 해당 환경인지의 여부를 boolean으로 반환한다.

/**
 * init MSW
 */
const MSWServerInit = async () => {
  // MSW in node server
  if (typeof window !== 'undefined') return
  const { server } = await import('@/mocks/server')
  server.listen()
}

const MSWClientInit = async () => {
  // MSW in client
  if (typeof window === 'undefined') return
  const { worker } = await import('@/mocks/browser')
  worker.start()
}

if (isTest()) MSWServerInit()
if (isTest() || isDev()) MSWClientInit()

# useEffectOnce custom hook

  • React 18 이후 버전에서는 개발 서버 실행 시 빈 deps를 가진 useEffect의 callback이 두 번 마운트 된다. (StrictMode 사용 시.. 에만 그렇긴 함. 근데 보통 StrictMdoe 쓰지 않나요? 아님말구)
  • 관련 Link (opens new window)
  • 해당 이슈를 해결하기 위해 + useEffect를 한 번 실행하는 경우에 명시적으로 해당 정보를 코드 레벨에 표현할 수 있도록 useEffectOnce와 useMount라는 훅을 만들었다.
  • 레퍼런스는 react-use (opens new window)에서 제공하는 useEffectOnce와 useMount hook
  • 필요에 의해 useEffectOnce에 현재 effect의 이전 호출 여부를 저장하는 임시 변수만 하나 추가했다.
  • useEffectOnce
import { EffectCallback, useEffect, useRef } from 'react'

/**
 * @description
 * useEffect를 단 한번 실행하는 케이스에 명시적으로 사용하기 위한 hook
 * @param callback
 */
const useEffectOnce = (callback: EffectCallback) => {
  const effectCalled = useRef(false)
  useEffect(() => {
    if (!effectCalled.current) {
      callback()
      effectCalled.current = true
    }
  }, [])
}

export default useEffectOnce
  • useMount
import useEffectOnce from './useEffectOnce'

/**
 * @description
 * 컴포넌트 mount 시점에 callback을 실행하는 lifecycle custom hook
 * @param callback - 컴포넌트 mount 시점에 실행할 callback
 */

const useMount = (callback: () => void) => {
  useEffectOnce(() => {
    callback()
  })
}

export default useMount
  • 사실 처음에 신디가 이 hook 만들고 싶다고 이야기하셨을때는 "굳이?" 라는 생각이 들어서 절찬리 반대했는데, 작업하다보니 있으면 편하겠더라. 그래서 오늘 내가 다시 useEffectOnce를 만들고 싶다고 이야기했다. 몹시 머쓱.. 다음부터는 반대할 때에도 좀 더 생각해보고 반대하자. 언제 탈룰라가 될 지 모른다.. ^_^....
  • 유틸성 커스텀 훅은 많아서 나쁠 게 없는 듯

← 2023 2월 TIL →