Incorrect nesting of HTML tags

DayPicker를 사용하던 도중 button이 div안에 들어갈 수 없다고 계속 경고 문구가 떴다.

hydration과정에서 서버와 클라이언트 사이에 랜더링되는 최종 dom tree가 달라서 생기는 문제. 이럴때는 서버에서 아예 랜더링하지 않게 하는 법이 있다.

export default function CalendarComponent() {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true);
  }, []);

  if (!isClient) return null; // 서버에서는 아무것도 렌더링하지 않음

  return (
    <DayPicker
      onDayClick={(date, modifiers) => {
        if (modifiers.hasEvent) {
          alert(`${date}`);
        }
      }}
      // 다른 props들
    />
  );
}