Recoil과 Next.js 호환성 문제: Zustand로의 전환

최근 프로젝트에서 Recoil과 Next.js를 함께 사용하면서 발생한 ‘duplicate atom key’ 에러가 발생했다. 이 문제는 Next.js의 재빌드 과정 중 Recoil atom 키가 중복 선언되면서 발생했다.

문제 발생

Recoil은 React 애플리케이션에서 상태 관리를 위한 강력한 도구이다. 그러나 Next.js와 함께 사용할 때, 특히 재빌드가 일어날 때, 동일한 atom 키가 여러 번 선언되어 ‘duplicate atom key’ 에러가 발생했다.

초기 대응 방안

처음에는 .env 파일에 RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED = false를 설정하여 Recoil의 키 중복 검사 기능을 비활성화하는 방법을 고려했다. 이 방법은 당장의 문제를 해결하는 것처럼 보였다. 그러나 이것은 근본적인 해결책은 아니다. 실제로, 이 방법은 중복 키 문제를 숨기는 것일 뿐, 프로젝트가 성장하면서 발생할 수 있는 다른 문제들을 감지하고 해결하는 데 있어 큰 도움이 되지 않는다.

Zustand로의 전환

이러한 단점을 고려하여, Recoil 대신 Zustand를 사용하기로 결정했다. Zustand는 상태 관리를 위한 더 간결하고 유연한 솔루션을 제공한다. 특히 서버 사이드 렌더링(SSR)이 포함된 Next.js 환경에서 더욱 잘 작동한다. Zustand를 사용하면 각 상태에 대해 고유한 키 값을 관리할 필요가 없어, ‘duplicate atom key’와 같은 문제를 해결할 수 있다.

장기적인 관점에서의 선택

.env 설정을 통해 문제를 우회하는 것은 단기적인 해결책일 뿐, 장기적인 안정성과 확장성을 고려한다면 Zustand로의 전환은 훨씬 더 합리적인 결정이라고 생각했다. 이러한 전환은 단순히 에러 메시지를 숨기는 것이 아니라, 상태 관리 방식을 개선하여 애플리케이션의 개발 및 유지보수 과정을 보다 수월하게 만들 것이다.

결론

모든 개발자는 프로젝트의 요구 사항과 기술 스택에 가장 적합한 도구를 선택해서 사용해야 한다. 이번 경험을 통해, 상태 관리의 다양한 접근 방식을 탐색하고, 프로젝트의 장기적인 프로세스를 위한 더 나은 결정을 내릴 수 있었다. 문제 해결을 넘어서, Zustand로의 전환은 개발 과정에서의 더 나은 효율성과 유연성을 고려한 것으로, 이는 나를 한층 성장하게 한 경험이었다.