React(Next) + Emotion로 MUI 따라 만들기

React로 개발할 때 UI 라이브러리를 사용하면 빠르게 구현할 수 있지만, 커스터마이징이 복잡하고 시간이 많이 소요되는 단점이 있습니다.
이를 해결하기 위한 headless 컴포넌트 라이브러리도 있지만, 인력과 시간이 충분하다면 직접 구현하는 것도 좋은 대안이 될 수 있습니다.
사이드 프로젝트로 도전해 보는 것도 의미 있을 것 같아 시작하게 되었습니다.

개발 환경

개발 환경은 NextJS 14 + Emotion입니다.
CRA 대신 Next 14를 사용하고 싶었고, 아직 SSR에서 정상 동작하지 않습니다.
따라서 "use client"를 추가해야 하지만, 익숙한 Emotion을 계속 사용하기로 했습니다.

NextJS14 + Emotion 개발환경 셋팅하기

NextJS14와 emotion을 이용하여 개발환경을 셋팅해보겠습니다.

아래 명령어를 이용하여 nextjs 14 설치하시면 됩니다. npx create-next-app@latest
참고로 위 명령어는 latest 버전을 설치하는 것이기 때문에 버전이 다를 수 있습니다.
제가 사용한 버전은 14.2.9입니다.

아래 명령어를 이용하여 emotion 관련 패키지를 설치해줍니다.
yarn add @emotion/react @emotion/styled

위 과정만 진행하시면 개발환경은 셋팅은 끝났습니다.
다음 게시글에서 ThemeContext, ThemeProvider 설정하는 방법을 알아보도록 하겠습니다.

링크

- nextjs14 설치 및 프로젝트 정리
- emotion 패키지 추가

개발 순서

개발 순서는 구현하고 싶은 컴포넌트를 기준으로 진행할 것입니다.