ShadCN UI 학습기: calendar 컴포넌트

박기범·2025년 3월 16일

shadcn 실습 트러블 슈팅

shadcn/ui

목록 보기

7/10

최근 일주일 동안 인턴 준비를 하기 위해 이사 + 적응이 필요하였습니다.

이번에 학습할 내용은 shadcn UI에서의 캘린더 컴포넌트입니다.

- 이번 게시물은 캘린더 컴포넌트를 학습하면서 마주하였던 빌드 오류들을 위주로 적어보고자 합니다.

React 19 + shadcn/ui 캘린더 충돌 해결기

🛠 문제 상황

최근 프로젝트에서 React 19을 사용하면서 shadcn/ui의 캘린더 컴포넌트를 설치하려고 했는데, 설치와 빌드 과정에서 아래와 같은 peer dependency 충돌이 발생했다.

? How would you like to proceed? » - Use arrow-keys. Return to submit.
>   Use --force
    Use --legacy-peer-deps

처음에는 --force나 --legacy-peer-deps를 사용해서 강제로 설치해도 별 문제가 없겠다 싶어서 --legacy-peer-deps를 사용하여 설치를 진행하였다.

🔍 원인 분석

설치, 빌드 중 ERESOLVE 오류가 발생하며 아래와 같은 로그가 출력되었다.
npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error While resolving: react-day-picker@8.10.1
npm error Found: react@19.0.0
npm error peer react@"^16.8.0 || ^17.0.0 || ^18.0.0" from react-day-picker@8.10.1
즉, react-day-picker@8.10.1이 React 19을 지원하지 않으며, react@18을 요구하는 것이 원인이었다. 하지만 shadcn/ui의 캘린더 컴포넌트는 react-day-picker@8.10.1을 사용하기 때문에 다른 버전으로 쉽게 교체할 수도 없는 상황이었다.

또한 date-fns@4.x와의 충돌 문제도 있었다.
npm error Found: date-fns@4.1.0
npm error Could not resolve dependency:
npm error peer date-fns@"^2.28.0 || ^3.0.0" from react-day-picker@8.10.1
즉, react-day-picker@8.10.1은 date-fns@4.x를 지원하지 않고 date-fns@3.x까지만 지원하는 문제도 함께 발생했다.

✅ 해결 방법

React 18로 다운그레이드 (shadcn/ui 캘린더 유지)

shadcn/ui의 캘린더를 꼭 사용해야 한다면, React 18을 사용해야 한다.
npm install react@18 react-dom@18
npm install react-day-picker@8.10.1
npm install date-fns@3.6.0
이렇게 하면 shadcn/ui의 캘린더가 정상 작동한다. 다만, React 19의 새로운 기능들을 사용하지 못한다는 단점이 있다.

또 다른 해결 방안 : 캘린더 라이브러리 교체 (React 19 유지)

shadcn/ui 캘린더를 고집하지 않는다면, 다른 캘린더 라이브러리를 고려할 수도 있다.

react-calendar

@mui/x-date-pickers

react-day-picker@9.x (shadcn/ui와 호환되지 않음)
이 방법을 선택하면 React 19을 유지할 수 있지만, shadcn/ui의 스타일을 직접 커스터마이징해야 할 수도 있다.