logger logger 미들웨어는 NODE_ENV=production 환경에서 자동으로 비활성화되어, 프로덕션 빌드에 불필요한 코드가 포함되거나 성능에 영향을 미치는 것을 방지합니다.
logger 미들웨어를 사용하면 애플리케이션의 상태 변화를 실시간으로 추적하고 디버깅할 수 있습니다. 이 미들웨어는 상태가 업데이트될 때마다 이전 상태와 새로운 상태를 콘솔에 로깅하여 개발 과정에서 상태 변화를 쉽게 파악할 수 있도록 도와줍니다.
const useStore = create(
logger(initialState, options: {
collapsed?: boolean,
diff?: boolean,
timestamp?: boolean
} = { collapsed: false, diff: false, timestamp: true })
)타임스탬프 표시, 상태 변경 사항의 차이점(diff) 확인, 로그 그룹 접기/펼치기(collapsed) 등의 다양한 옵션을 지원하여 개발자의 필요에 맞게 로그 출력을 조정할 수 있습니다. 특히 복잡한 상태 관리가 필요한 애플리케이션에서 버그를 식별하고 상태 흐름을 이해하는 데 매우 유용합니다.
const useStore = create(
logger({ count: 0 }, { diff: true, timestamp: true })
);
export default function Page() {
const [count, setCount] = useStore(store => store.count)
return (
<div>
<h1>{count}</h1>
<button onClick={() => setCount(count => count + 1)}>Increment</button>
<button onClick={() => setCount(count => count - 1)}>Decrement</button>
</div>
)
}