NextJS에서 react-multi-carousel 사용하기

NextJS에서 외부라이브러리를 사용할 때에 유독 오류를 많이 마주했고 해결하면서 부족했던 부분을 알게 되어서 블로그를 적게 되었다.

Error: Object prototype may only be an Object or null: undefined

분명 가져오란 대로 가져왔는데 왜 이런 오류가 발생했을까?
그 이유는 서버컴포넌트에서 해당 라이브러리를 가져왔기 때문이다.

NextJS는 컴포넌트별로 렌더링을 다양한 방식으로 할 수 있다.

그 중 위와 같이

1. 이벤트 구독
2. react hook으로 상태관리
3. 브라우저 API(localstorage 등)을 사용

등의 상황에서는 클라이언트 컴포넌트를 사용해주어야 한다.

react-multi-carousel이라는 라이브러리는 캐러셀, 혼자 돌아가거나 사용자의 클릭에 의해서 지속적으로 다른 값을 보여주어야한다.
즉, 상태가 계속 바뀌어야 하기 때문에 무조건 클라이언트 컴포넌트로 만들어 주어야한다.

그래서 결론은 🧐

react-multi-carousel은 클라이언트 컴포넌트에서만 작동하며
클라이언트 컴포넌트를 만들기 위해서는 파일의 최상단에 'use client'만 적어주면된다!