[사람별_Day4] RBC 파헤치기 3 - 캘린더는 왜 CSR?

리액트 빅 캘린더(RBC)를 구현하기 전, 캘린더는 사용자와의 상호작용이 많이 필요하기 때문에(이벤트 핸들러) 클라이언트 컴포넌트여야 한다고 생각했다.
실제로 "use client"를 명시하지 않으면 아래와 같은 오류가 발생했다.

 

 

CSR인 이유

오류가 발생했다는 것은 필히 클라이언트 컴포넌트여야 한다는 것인데..

 

🤔그 이유가 무엇일까?

1. RBC는 내부적으로 클래스 컴포넌트를 사용

우선 사진과 같은 오류는 클래스 컴포넌트 기반 라이브러리를 서버 컴포넌트에서 렌더링하려고 할 때 발생한다.

클래스 컴포넌트는 서버 컴포넌트에서 동작할 수 있도록 설계되지 않았다.

따라서 RBC는 Next.js의 서버 컴포넌트 환경에서는 이를 직접 실행할 수 없다.

 

2. 이벤트 핸들링

일정 클릭, 드래그 등 사용자와의 상호작용이 필요한 이벤트들은 서버 컴포넌트에서 사용될 수 없다.

 

3. RBC는 DOM을 조작

캘린더 특성상 DOM 요소를 조작하기 때문에 document와 같은 브라우저 API는 서버 사이드에서 실행할 수 없다.

 

 

React-Big-Calendar의 DOM 조작

RBC는 React 기반의 라이브러리지만, 내부적으로 브라우저의 DOM을 직접 조작하는 기능을 포함하고 있다.

1. 이벤트 렌더링 및 스타일 적용

• 캘린더 화면을 직접 생성
• 월간/주간 뷰를 전환하면 기존 DOM을 지우고 새롭게 렌더링
• 스타일을 동적으로 적용(eventPropGetter)

2. 드래그 & 드롭

• 사용자의 클릭과 드래그를 통해 이동하거나 크기 조절
• 마우스 이벤트 감지, 위치 조작
• DOM 이벤트를 직접 핸들링(내부 라이브러리:react-dnd)

3. 툴팁, 팝업, 모달

• DOM에 새로운 요소 추가, 조작(내부 라이브러리:react-popper)

4. 반응형 및 동적 높이 조정

• 브라우저 크기에 따라 동적으로 높이 조정(style 속성을 활용:autoHeight)
• window.resize 이벤트를 추가하여 DOM을 다시 그리는 반응형 구현

그렇다면 왜 DOM을 조작하는 것일까?

state로 관리하게 되면 필요한 부분만 리렌더링 되어서 사용자에게 변동사항을 더욱 빠르게 보여줄 수 있는 것 아닐까?

 

한마디로 정리하자면 캘린더의 복잡한 레이아웃과 성능 최적화를 위한 것이다.

 

state가 변화하면 리렌더링이 일어나게 된다.

이 동작을 자세히 뜯어보자면

페이지 전체 중, 일부만 변동이 일어난다. -> 원본인 DOM과 비교하여 변동된 부분(state)만 감지한다. -> 리렌더링을 통해 변동된 부분을 반영한다.

 

state로 관리하는 부분이 적거나 확실하다면 이런 방식이 훨씬 효율적이다.

 

하지만 RBC는

1. 이벤트 하나가 바뀌어도 전체 캘린더 UI를 다시 렌더링 해야 한다.
2. 즉각적으로 반응해야 하는 드래그&드롭은 실시간으로 부드러운 반영이 필요하다.
3. 많은 기능이 있는 캘린더의 경우에는 예상보다 더 많은 요소가 다시 렌더링될 수도 있다.
4. 캘린더와 관련이 없는 부분임에도 캘린더가 자식컴포넌트 입장이 된다면 리렌더링이 발생한다.

이와 같은 이유들 때문에 state로 관리하게 되면 리렌더링이 불필요하게 발생할 수 있다.

 

 

일정을 State로 관리

RBC가 DOM(Document Object Model) 조작을 한다면,

🤔state를 어떻게 활용하는 거지? 아니, 사용할 수나 있나??

쉽게 생각하면 껍데기는 DOM으로 조작, 알맹이는 state로 관리하는 것이다.

일정과 관련된 데이터를 state로 관리하고, 이를 캘린더에 반영하는 방식을 사용한다.

 

위에서 살펴보았듯이 RBC는 events 배열을 기반으로 일정을 표시한다.

이 events를 state로 관리하여 동적으로 일정을 관리(추가, 이동, 삭제)하는 것이다.

 

useState의 초기값을 이벤트 배열로 두고, 일정이 변동되면 setState를 통해 캘린더 UI가 자동으로 업데이트 된다.

클릭 이벤트나 API 연동 등을 통해 일정을 동적으로 관리하는 것이다.

 

 

📍예제 코드: events를 useState로 관리하기

import { useState } from "react";
import { Calendar, dateFnsLocalizer } from "react-big-calendar";
import { format, parse, startOfWeek, getDay } from "date-fns";

const localizer = dateFnsLocalizer({
  format,
  parse,
  startOfWeek,
  getDay,
  locales: { "en-US": require("date-fns/locale/en-US") },
});


const MyCalendar = () => {
// ✅ `events`를 state로 관리
  const [events, setEvents] = useState([
    {
      title: "회의",
      start: new Date(2024, 3, 10, 10, 0), // 4월 10일 10:00 AM
      end: new Date(2024, 3, 10, 12, 0),   // 4월 10일 12:00 PM
    },
  ]);

  // ✅ 새로운 이벤트 추가 함수
  const addEvent = () => {
    const newEvent = {
      title: "새 일정",
      start: new Date(2024, 3, 15, 14, 0), // 4월 15일 2:00 PM
      end: new Date(2024, 3, 15, 16, 0),   // 4월 15일 4:00 PM
    };
    setEvents([...events, newEvent]); // 기존 이벤트에 새 이벤트 추가
  };

  return (
    <div>
      <button onClick={addEvent}>새 일정 추가</button> {/* 버튼 클릭 시 새로운 일정 추가 */}
      <Calendar
        localizer={localizer}
        events={events} // ✅ state로 관리되는 events 전달
        startAccessor="start"
        endAccessor="end"
        style={{ height: 500 }}
      />
    </div>
  );
};

export default MyCalendar;