Immer 콜백 내에서 유용한 정보를 디버그/로그하기
상태 변경을 처리하기 위해 React 앱에서 Immer을 사용할 때, 때로는 예상치 못한 상태 동작을 디버그하는 것이 어려울 수 있습니다. Immer의 console.log와 debugger의 기본 동작은 해당 순간의 상태에 대해 유용한 정보를 제공하지 않는 Proxy 객체를 출력하는 것입니다. 이 블로그 포스트에서는 Immer 콜백 내에서 유용한 정보를 디버그하고 로그하기 위한 몇 가지 기법을 탐색하겠습니다.
방법 1: Immer의 current() 함수 사용
Immer 버전 7부터는 current() 함수를 사용하여 Immer draft 내에서 현재 상태를 가져올 수 있습니다.
import { current } from 'immer';
return immer(state, draftState => {
// 상태 변이 수행
console.log(current(draftState));
});current() 함수를 사용하면 상태를 직접 로그하고 유용한 정보를 얻을 수 있으므로 디버깅이 훨씬 쉬워집니다.
방법 2: Draft의 직렬화 및 역직렬화
만약 Draft 상태의 일반적인 JavaScript 객체 표현을 선호한다면, 직렬화와 역직렬화를 통해 가능합니다.
console.log(JSON.parse(JSON.stringify(draft)));직렬화와 역직렬화를 이용하여 draft를 일반적인 JavaScript 객체로 변환하면, 상태가 예상대로 콘솔에 표시되어 내용을 더 명확하게 이해할 수 있습니다.
방법 3: Chrome Dev Tools 활용
만약 Chrome Dev Tools 내에서 debugger를 사용하고 있다면, 디버거 패널을 통해 상태 값을 탐색할 수 있습니다.
debugger;중단점에 도달하면, Sources 탭의 오른쪽 패널을 열고 다음 단계를 따릅니다:
- “Scope”를 클릭합니다.
- “Local”을 확장합니다.
- “searchTarget”를 검색합니다.
- “[[Target]]”을 확장합니다.
- “base/draft”를 확장합니다.
“base/draft” 섹션 내에서 상태의 실제 값이 나타나므로, 검사 및 디버깅이 가능합니다.
결론
이 블로그 포스트에서는 Immer 콜백 내에서 유용한 정보를 로그하고 디버그하기 위한 다양한 기법을 살펴보았습니다. Immer의 current() 함수, Draft의 직렬화 및 역직렬화, Chrome Dev Tools을 활용함으로써 상태 변경에 대한 깊은 통찰력을 얻고 디버깅 프로세스를 용이하게 할 수 있습니다. 이러한 기법을 사용하면 React 애플리케이션에서 예상치 못한 상태 동작을 추적하고 해결하는 데 도움이 될 것입니다.
