경량의 서비스의 경우 Redux를 사용하는 것을 그만두고 ReactContext로 관리하게 되었지만, 값의 변경이나 타이밍에 로그해 주는 redux-logger적인 것이 있으면 좋겠다고 생각했기 때문에 자작한 이야기
(만든 3개월 정도 전이니까 지금이라면 이미 더 좋은 것이 있을지도...

만든 것

hooks/useLogger.js

import { useCallback, useEffect, useRef } from "react"
import moment from "moment"

const colors = {
  prefix: "#4CAF50",
  log: "inherit",
  prev: "#9E9E9E",
  next: "#03A9F4",
  error: "#F20404",
}

function usePrevious(value) {
  const ref = useRef(null)
  useEffect(() => {
    ref.current = value
  })
  return ref.current
}

export function useContextLogger(prefix, inputs) {
  Object.keys(inputs).forEach(key => {
    const value = inputs[key]
    const prev = usePrevious(value)
    useEffect(() => {
      const timestamp = moment().format("HH:mm:ss.SSS")
      console.group(
        `%c[${prefix}] %c${key} %c@${timestamp}`,
        `color: ${colors.prefix}`,
        `color: ${colors.log}; font-weight: bold;`,
        "color: gray; font-weight: lighter;",
      )
      console.log(`%c prev`, `color: ${colors.prev}`, prev)
      console.log(`%c next`, `color: ${colors.next}`, value)
      console.groupEnd()
    }, [value])
  })
}

사용법

10 분 정도로 파파로 만든 예이므로 미묘한 곳 가득하지만 용서를

contexts/todo.jsx

const TodosContext = createContext(null)
const TodosContextProvider = ({ children}) => {
  const [todos, setTodos] = useState([])

  const add = useCallback((todo) => {
    const id = todos.length + 1
    setTodos([
      ...todos,
      {
        id,
        text: todo,
        completed: false,
        createdAt: moment().format('YYYY/MM/DD HH:mm:ss'),
      }
    ])
  }, [todos])

  const toggle = useCallback((id) => {
    const todo = todos.find(t => t.id === id)
    if (!todo) return

    setTodos([
      ...todos.filter(t => t.id !== id),
      { ...todo, completed: !todo.completed },
    ].sort((a, b) => a.id - b.id))
  }, [todos])

  const remove = useCallback((id) => {
    setTodos(todos.filter(t => t.id !== id))
  })

  // ロガーで変更を監視したいパラメータをセット
  useContextLogger("TodosContext", { todos })

  return (
    <TodosContext.Provider value={{ todos, add, toggle, remove }}>
      {children}
    </TodosContext.Provider>
  )
}

이런 느낌으로 로그를 넣으면, ↓과 같이 변경 전후의 값이 로그로서 토출된다.



본가 redux-logger에는 전혀 미치지 않지만, 뭐 나름대로 실용적인 것이 되어 만족

덤

간단한 로거도 ReactHooks를 사용하여 만들었으므로 넣어라.

hooks/useLogger.js

function useLogger(prefix) {
  const log = useCallback(
    (log, src) => {
      const timestamp = moment().format("HH:mm:ss.SSS")
      console.log(
        `%c[${prefix}] %c${log} @ %c${timestamp}`,
        `color: ${colors.prefix}`,
        `color: ${colors.log}; font-weight: bold;`,
        "color: gray; font-weight: lighter;",
        src || "",
      )
    },
    [prefix],
  )
  return { log }
}

이쪽은 console.log 대신 사용할 수 있고, useLogger 호출할 때 prefix를 설정할 수 있기 때문에 어느 부분에서 뱉어진 로그인지를 관리하는데 좋은 느낌.

const hogeLogger = useLogger('HogeComponent')

hogeLogger.log('test')
hogeLogger.log('obj ->', obj)

처럼 사용할 수 있다.