TL;DR; Next.js에서 React 18 라이브러리를 사용하면서 디렉티브 문제를 해결하기 위해 rollup-plugin-preserve-use-client 플러그인을 개발한 과정을 공유합니다. rollup-plugin-preserve-directives 을 사용할 수 없었던 이유와, 옵션을 로 사용하면서 클라이언트 컴포넌트에만 디렉티브를 유지할 수 있는 방법을 찾는 과정을 설명합니다. 1. 개발하게 된 배경 저는 React 18을 활용한 UI 라이브러리를 개발하여 npm 모듈을 만들었습니다. 이 UI 라이브러리를 활용하여 Next.js 프로젝트에서 사용하려던 중 아래와 같은 문제를 마주치게 되었습니다. useState only works in Client Components… 에러 발생 문제의 원인을 파악하다가, 처음에는 UI 라이브러리에 클라이언트 컴포넌트와 서버 컴포넌트를 분리하여 번들링하지 않아서 발생하는 문제라고 생각했습니다. 관련해서 아래와 같은 글을 참고했…