Context 리렌더링 관련 정리

[DevelopSoo]

1. useMemo 활용하기
   참고:

   FitLink-FE/packages/ui/src/components/DayOfWeekPicker/index.tsx

   Lines 48 to 56 in 4843435

   	<DayOfWeekPickerContext.Provider
   	value={{
   	value: value || defaultDay,
   	completed: completed || Array.from(Array(DAYS_IN_WEEK), () => false),
   	onItemClick: useCallback(setValue, [setValue]),
   	disabledDays: disabledDays || [],
   	errorDays,
   	}}
   	>

Provider의 value에 객체 형태로 넣다보니 렌더 때마다 새로운 객체가 생성될 것 같습니다. 그래서 useMemo를 이용해서 의존값이 모두 같으면 이전 객체를 사용할 수 있게 useMemo를 활용하는 방법이 있을 것 같습니다.
또한 기존엔 setValue 부분에 useCallback을 쓰셨는데, jsx 내부에서 리액트 훅을 쓰는 건 규칙 위반이라 제외했습니다.

<예시>

    const contextValue = useMemo(
      () => ({
        value: value || defaultDay,
        completed: completed || EMPTY_COMPLETED,
        onItemClick: setValue,
        disabledDays: disabledDays || EMPTY_DISABLED_DAYS,
        errorDays,
      }),
      [value, defaultDay, completed, setValue, disabledDays, errorDays],
    );

    return (
      // [변경 4] 객체 리터럴 대신 memo된 변수를 전달
      <DayOfWeekPickerContext.Provider value={contextValue}>
        <DayOfWeekPickerImpl ref={ref} {...commonProps} />
      </DayOfWeekPickerContext.Provider>
    );

2. Context 분리 방법
   자주 바뀌는 Context 와 자주 바뀌지 않는 Context를 따로 관리하고, 따로 구독하게 만들 수도 있습니다. 이를 통해 호출
   참고:

   FitLink-FE/packages/ui/src/components/DayOfWeekPicker/Context.tsx

   Lines 1 to 15 in 4843435

   	import { createContext, Dispatch } from "react";
   	import { Days } from "./Days";
   	type DayOfWeekPickerContext = {
   	value?: Days;
   	completed: boolean[];
   	onItemClick: Dispatch<React.SetStateAction<Days | undefined>>;
   	disabledDays?: Days[];
   	errorDays?: boolean[];
   	};
   	const DayOfWeekPickerContext = createContext<DayOfWeekPickerContext | null>(null);
   	export default DayOfWeekPickerContext;

간단하게 타입 지정 부분만 보여주면 다음과 같을 것 같네요.

type ValueContextType = {
  value: Days;
};

type ConfigContextType = {
  onItemClick: Dispatch<React.SetStateAction<Days | undefined>>;
  completed: boolean[];
  disabledDays: Days[];
  errorDays?: boolean[];
};

const ValueContext = createContext<ValueContextType | null>(null);
const ConfigContext = createContext<ConfigContextType | null>(null);

다만 현재는 이렇게 해도 차이가 없을 것 같은데요. 그 이유는 1) Provider를 감싸고 있는 부분이 children 으로 받고 있는 것이 아니라 바로 자식으로 받고 있는 형태라 부모가 리렌더링되면서 자식도 모두 리렌더링되어 최적화 시도와 상관없이 자식 컴포넌트가 모두 리렌더링됨. 2) DayOfWeekPickerItem 컴포넌트에서 valueContext와 configContext를 모두 사용하기 때문에 분리해도 어차피 모두 사용하는 구조임

3. useDayOfWeekPickerContext를 DayOfWeekPickerItem 컴포넌트가 아니라 그 부모인 DayOfWeekPickerImpl 에서 호출하고, DayOfWeekPickerItem는 React.memo 로 컴포넌트 리렌더링 최적화하기.
   참고:

   FitLink-FE/packages/ui/src/components/DayOfWeekPicker/index.tsx

   Lines 92 to 96 in 4843435

   	const DayOfWeekPickerItem = forwardRef<HTMLDivElement, DayOfWeekPickerItemProps>(
   	({ day, children }, ref) => {
   	const { value, onItemClick, completed, disabledDays, errorDays } = useDayOfWeekPickerContext();
   	const isCurrent = value === day;
   	const isDisabled = disabledDays?.includes(day);

이건 예시 코드를 짜려니 좀 많이 바꿔야할 것 같아서 작성하지 못했습니다.
다만 합성 컴포넌트는 기본적으로 "독립적으로 동작"하게 하기 위한 목적도 있는데 그 목적은 깨지게 되고 필수적으로 DayOfWeekPickerImpl에 의존하게 됩니다. 또한 props 의 참조값을 잘 관리해야 최적화가 잘 되기 때문에 신경을 잘 써야할 것 같습니다.

4. zustand는 어떻게 하는지 봤더니 외부에서 변경된 값을 안전하게 읽게 하는 useSyncExternalStore 와 같은 훅을 사용하고 있습니다. 그리고 이 훅은 컴포넌트에서 구독하는 값이 달라지는 경우만 리렌더링하기 때문에 만약 월요일부터 일요일까지 중 요일을 선택했을 때, 월요일을 선택 시 기존에 선택됐던 요일(ex. 화요일)이 취소되어 월요일, 화요일만 다시 변경되고 다른 요일은 그대로 유지될 수 있습니다.
   참고: https://github.com/pmndrs/zustand/blob/main/src/react.ts

[DevelopSoo]

1번 예시 코드

"use client";

import React, { forwardRef, useMemo } from "react";

import DayOfWeekPickerContext from "./Context";
import { Days } from "./Days";
import useControllableState from "../../hooks/useControllableState";
import useDayOfWeekPickerContext from "../../hooks/useDayOfWeekPickerContext";
import { cn } from "../../lib/utils";

const DayTable = ["월", "화", "수", "목", "금", "토", "일"] as const;

const DAY_OF_WEEK_PICKER_NAME = "DayOfWeekPicker";
const DAY_OF_WEEK_PICKER_ITEM_NAME = "DayOfWeekPickerItem";
const DAY_OF_WEEK_PICKER_IMPL_NAME = "DayOfWeekPickerImpl";
const DAYS_IN_WEEK = 7;

// [변경 1] fallback 값을 컴포넌트 밖 상수로 빼서 참조를 고정
// 기존: 렌더마다 Array.from(...) / [] 로 새 배열 생성 → useMemo 의존성이 매번 바뀜
const EMPTY_COMPLETED: boolean[] = Array.from(Array(DAYS_IN_WEEK), () => false);
const EMPTY_DISABLED_DAYS: Days[] = [];

export type DayOfWeekPickerProps = React.HTMLAttributes<HTMLDivElement> & WrapperProps;
type WrapperProps = {
  currentDay?: Days;
  onCurrentDayChange: (value: Days) => void;
  defaultDay?: Days;
  completed?: boolean[];
  disabledDays?: Days[];
  errorDays?: boolean[];
};

const DayOfWeekPicker = forwardRef<HTMLDivElement, DayOfWeekPickerProps>(
  (
    {
      currentDay,
      onCurrentDayChange,
      completed,
      defaultDay = Days.Monday,
      disabledDays,
      errorDays,
      ...commonProps
    },
    ref,
  ) => {
    const [value, setValue] = useControllableState({
      prop: currentDay,
      defaultProp: defaultDay,
      onChange: onCurrentDayChange,
    });

    // [변경 2] Provider에 넘길 객체를 useMemo로 생성
    // 기존: value={{ ... }} 객체 리터럴 → 렌더마다 새 객체 → Consumer 7개 전부 리렌더
    // 변경: 의존값이 모두 같으면 이전 객체를 재사용 → Consumer 리렌더 없음
    // [변경 3] useCallback(setValue, [setValue]) 제거 → setValue를 그대로 사용
    // (setValue를 그대로 되돌려주는 것이라 효과가 없었고, JSX 안 훅 호출은 규칙 위반 소지)
    const contextValue = useMemo(
      () => ({
        value: value || defaultDay,
        completed: completed || EMPTY_COMPLETED,
        onItemClick: setValue,
        disabledDays: disabledDays || EMPTY_DISABLED_DAYS,
        errorDays,
      }),
      [value, defaultDay, completed, setValue, disabledDays, errorDays],
    );

    return (
      // [변경 4] 객체 리터럴 대신 memo된 변수를 전달
      <DayOfWeekPickerContext.Provider value={contextValue}>
        <DayOfWeekPickerImpl ref={ref} {...commonProps} />
      </DayOfWeekPickerContext.Provider>
    );
  },
);

DayOfWeekPicker.displayName = DAY_OF_WEEK_PICKER_NAME;

// ===== 아래(Impl, Item)는 기존과 동일 =====

const DayOfWeekPickerImpl = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...commonProps }, ref) => {
    return (
      <div
        className={cn(
          "text-body-3 text-text-primary inline-flex items-center justify-between gap-[24px] transition-colors",
          className,
        )}
        {...commonProps}
        ref={ref}
      >
        {Array.from(Array(DAYS_IN_WEEK), (_, index) => index).map((day) => (
          <DayOfWeekPickerItem key={day} day={day}>
            {DayTable[day]}
          </DayOfWeekPickerItem>
        ))}
      </div>
    );
  },
);
DayOfWeekPickerImpl.displayName = DAY_OF_WEEK_PICKER_IMPL_NAME;

export type DayOfWeekPickerItemProps = React.HTMLAttributes<HTMLDivElement> & ItemProps;
type ItemProps = {
  day: Days;
};

const DayOfWeekPickerItem = forwardRef<HTMLDivElement, DayOfWeekPickerItemProps>(
  ({ day, children }, ref) => {
    const { value, onItemClick, completed, disabledDays, errorDays } = useDayOfWeekPickerContext();
    const isCurrent = value === day;
    const isDisabled = disabledDays?.includes(day);

    const handleClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
      if (isDisabled) return;

      e.preventDefault();
      onItemClick(day);
    };
    const isCompleted = completed[day];
    const isError = errorDays ? errorDays[day] : false;

    return (
      <div
        className={cn(
          "flex h-[30px] w-[30px] items-center justify-center rounded-full border-none transition-colors duration-150",
          {
            "md:hover:bg-brand-primary-600": !isDisabled,
          },
          {
            "bg-background-sub3": isCompleted,
          },
          {
            "cursor-not-allowed bg-gray-200 opacity-50": isDisabled,
          },
          {
            "bg-notification": isError,
          },
          {
            "bg-brand-primary-500": isCurrent,
          },
        )}
        ref={ref}
        onClick={handleClick}
      >
        {children}
      </div>
    );
  },
);
DayOfWeekPickerItem.displayName = DAY_OF_WEEK_PICKER_ITEM_NAME;

export default DayOfWeekPicker;

[DevelopSoo]

2번 예시 코드

"use client";

import React, { createContext, Dispatch, forwardRef, useContext, useMemo } from "react";

import { Days } from "./Days";
import useControllableState from "../../hooks/useControllableState";
import { cn } from "../../lib/utils";

const DayTable = ["월", "화", "수", "목", "금", "토", "일"] as const;

const DAY_OF_WEEK_PICKER_NAME = "DayOfWeekPicker";
const DAY_OF_WEEK_PICKER_ITEM_NAME = "DayOfWeekPickerItem";
const DAY_OF_WEEK_PICKER_IMPL_NAME = "DayOfWeekPickerImpl";
const DAYS_IN_WEEK = 7;

const EMPTY_COMPLETED: boolean[] = Array.from(Array(DAYS_IN_WEEK), () => false);
const EMPTY_DISABLED_DAYS: Days[] = [];

// ===== [변경 1] Context를 "변경 빈도"에 따라 두 개로 분리 =====
//
// 기존: Context 하나에 value / completed / onItemClick / disabledDays / errorDays 를 전부 담음
//       → 어느 하나만 바뀌어도 그 Context를 구독하는 Item 7개 전부 리렌더
//
// 변경:
//   - ValueContext  : 클릭할 때마다 바뀌는 "선택된 요일" (자주 변경)
//   - ConfigContext : 부모가 props를 바꿀 때만 변하는 설정값 + 클릭 핸들러 (거의 안 변경)
//
// 효과: completed / disabledDays / errorDays 가 바뀌어도 ValueContext는 그대로이고,
//       반대로 요일 선택이 바뀌어도 ConfigContext는 그대로 유지됨

type ValueContextType = {
  value: Days;
};

type ConfigContextType = {
  onItemClick: Dispatch<React.SetStateAction<Days | undefined>>;
  completed: boolean[];
  disabledDays: Days[];
  errorDays?: boolean[];
};

const ValueContext = createContext<ValueContextType | null>(null);
const ConfigContext = createContext<ConfigContextType | null>(null);

// ===== [변경 2] 분리된 Context마다 전용 훅 =====
// Item은 필요한 Context만 골라서 구독할 수 있게 됨

const useValueContext = () => {
  const context = useContext(ValueContext);
  if (!context) {
    throw new Error(
      "DayOfWeekPicker components must be used within a <DayOfWeekPicker> component.",
    );
  }

  return context;
};

const useConfigContext = () => {
  const context = useContext(ConfigContext);
  if (!context) {
    throw new Error(
      "DayOfWeekPicker components must be used within a <DayOfWeekPicker> component.",
    );
  }

  return context;
};

export type DayOfWeekPickerProps = React.HTMLAttributes<HTMLDivElement> & WrapperProps;
type WrapperProps = {
  currentDay?: Days;
  onCurrentDayChange: (value: Days) => void;
  defaultDay?: Days;
  completed?: boolean[];
  disabledDays?: Days[];
  errorDays?: boolean[];
};

const DayOfWeekPicker = forwardRef<HTMLDivElement, DayOfWeekPickerProps>(
  (
    {
      currentDay,
      onCurrentDayChange,
      completed,
      defaultDay = Days.Monday,
      disabledDays,
      errorDays,
      ...commonProps
    },
    ref,
  ) => {
    const [value, setValue] = useControllableState({
      prop: currentDay,
      defaultProp: defaultDay,
      onChange: onCurrentDayChange,
    });

    // ===== [변경 3] Context별로 각각 useMemo =====
    // 두 객체의 의존성이 서로 겹치지 않으므로, 한쪽이 바뀌어도 다른 쪽 참조는 유지됨

    // 자주 바뀌는 쪽: 의존성은 value 관련뿐
    const valueContext = useMemo<ValueContextType>(
      () => ({ value: value || defaultDay }),
      [value, defaultDay],
    );

    // 거의 안 바뀌는 쪽: value가 바뀌어도 이 객체는 재사용됨
    const configContext = useMemo<ConfigContextType>(
      () => ({
        onItemClick: setValue,
        completed: completed || EMPTY_COMPLETED,
        disabledDays: disabledDays || EMPTY_DISABLED_DAYS,
        errorDays,
      }),
      [setValue, completed, disabledDays, errorDays],
    );

    return (
      // ===== [변경 4] Provider를 두 겹으로 =====
      <ConfigContext.Provider value={configContext}>
        <ValueContext.Provider value={valueContext}>
          <DayOfWeekPickerImpl ref={ref} {...commonProps} />
        </ValueContext.Provider>
      </ConfigContext.Provider>
    );
  },
);

DayOfWeekPicker.displayName = DAY_OF_WEEK_PICKER_NAME;

// ===== Impl은 기존과 동일 =====

const DayOfWeekPickerImpl = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...commonProps }, ref) => {
    return (
      <div
        className={cn(
          "text-body-3 text-text-primary inline-flex items-center justify-between gap-[24px] transition-colors",
          className,
        )}
        {...commonProps}
        ref={ref}
      >
        {Array.from(Array(DAYS_IN_WEEK), (_, index) => index).map((day) => (
          <DayOfWeekPickerItem key={day} day={day}>
            {DayTable[day]}
          </DayOfWeekPickerItem>
        ))}
      </div>
    );
  },
);
DayOfWeekPickerImpl.displayName = DAY_OF_WEEK_PICKER_IMPL_NAME;

export type DayOfWeekPickerItemProps = React.HTMLAttributes<HTMLDivElement> & ItemProps;
type ItemProps = {
  day: Days;
};

const DayOfWeekPickerItem = forwardRef<HTMLDivElement, DayOfWeekPickerItemProps>(
  ({ day, children }, ref) => {
    // ===== [변경 5] Item이 두 Context를 따로 구독 =====
    // 기존: 하나의 훅에서 5개 값을 한꺼번에 꺼냄 → 어느 하나만 바뀌어도 리렌더
    // 변경: 각 Context가 바뀔 때만 리렌더 (다만 이 Item은 둘 다 쓰므로 둘 중 하나라도 바뀌면 리렌더됨)
    //
    // ※ 한계: 요일 선택이 바뀌면 ValueContext가 바뀌어 여전히 Item 7개 전부 리렌더됨
    //   → "선택된 2개만 리렌더"는 3번(파생값 props + React.memo)이나 4·5번(selector) 영역
    const { value } = useValueContext();
    const { onItemClick, completed, disabledDays, errorDays } = useConfigContext();

    const isCurrent = value === day;
    const isDisabled = disabledDays.includes(day);

    const handleClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
      if (isDisabled) return;

      e.preventDefault();
      onItemClick(day);
    };
    const isCompleted = completed[day];
    const isError = errorDays ? errorDays[day] : false;

    return (
      <div
        className={cn(
          "flex h-[30px] w-[30px] items-center justify-center rounded-full border-none transition-colors duration-150",
          {
            "md:hover:bg-brand-primary-600": !isDisabled,
          },
          {
            "bg-background-sub3": isCompleted,
          },
          {
            "cursor-not-allowed bg-gray-200 opacity-50": isDisabled,
          },
          {
            "bg-notification": isError,
          },
          {
            "bg-brand-primary-500": isCurrent,
          },
        )}
        ref={ref}
        onClick={handleClick}
      >
        {children}
      </div>
    );
  },
);
DayOfWeekPickerItem.displayName = DAY_OF_WEEK_PICKER_ITEM_NAME;

export default DayOfWeekPicker;

[DevelopSoo]

3번 예시 코드

"use client";

import React, { forwardRef, memo, useMemo } from "react";

import DayOfWeekPickerContext from "./Context";
import { Days } from "./Days";
import useControllableState from "../../hooks/useControllableState";
import useDayOfWeekPickerContext from "../../hooks/useDayOfWeekPickerContext";
import { cn } from "../../lib/utils";

const DayTable = ["월", "화", "수", "목", "금", "토", "일"] as const;

const DAY_OF_WEEK_PICKER_NAME = "DayOfWeekPicker";
const DAY_OF_WEEK_PICKER_ITEM_NAME = "DayOfWeekPickerItem";
const DAY_OF_WEEK_PICKER_IMPL_NAME = "DayOfWeekPickerImpl";
const DAYS_IN_WEEK = 7;

const EMPTY_COMPLETED: boolean[] = Array.from(Array(DAYS_IN_WEEK), () => false);
const EMPTY_DISABLED_DAYS: Days[] = [];

export type DayOfWeekPickerProps = React.HTMLAttributes<HTMLDivElement> & WrapperProps;
type WrapperProps = {
  currentDay?: Days;
  onCurrentDayChange: (value: Days) => void;
  defaultDay?: Days;
  completed?: boolean[];
  disabledDays?: Days[];
  errorDays?: boolean[];
};

// ===== DayOfWeekPicker: A 버전과 동일 (useMemo로 value 참조 안정화) =====
const DayOfWeekPicker = forwardRef<HTMLDivElement, DayOfWeekPickerProps>(
  (
    {
      currentDay,
      onCurrentDayChange,
      completed,
      defaultDay = Days.Monday,
      disabledDays,
      errorDays,
      ...commonProps
    },
    ref,
  ) => {
    const [value, setValue] = useControllableState({
      prop: currentDay,
      defaultProp: defaultDay,
      onChange: onCurrentDayChange,
    });

    const contextValue = useMemo(
      () => ({
        value: value || defaultDay,
        completed: completed || EMPTY_COMPLETED,
        onItemClick: setValue,
        disabledDays: disabledDays || EMPTY_DISABLED_DAYS,
        errorDays,
      }),
      [value, defaultDay, completed, setValue, disabledDays, errorDays],
    );

    return (
      <DayOfWeekPickerContext.Provider value={contextValue}>
        <DayOfWeekPickerImpl ref={ref} {...commonProps} />
      </DayOfWeekPickerContext.Provider>
    );
  },
);

DayOfWeekPicker.displayName = DAY_OF_WEEK_PICKER_NAME;

// ===== [변경 1] Impl이 Context를 대신 구독하고, 요일별 파생값을 계산해 props로 내려줌 =====
//
// 기존: Item 7개가 각각 Context를 구독 → value가 바뀌면 7개 전부 리렌더
// 변경: Context 구독자는 Impl 하나뿐. Impl이 "이 요일은 선택됐나 / 비활성인가 / ..." 를
//       boolean으로 계산해서 Item에 넘김. Item은 Context를 전혀 모름.
//
// 이렇게 하면 value가 2→3으로 바뀔 때:
//   - Impl 리렌더 (Context 구독자니까)
//   - day=2 Item: isCurrent true→false 로 props 변경 → 리렌더
//   - day=3 Item: isCurrent false→true 로 props 변경 → 리렌더
//   - 나머지 5개: props 전부 동일 → memo가 스킵 ✅
const DayOfWeekPickerImpl = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...commonProps }, ref) => {
    const { value, onItemClick, completed, disabledDays, errorDays } = useDayOfWeekPickerContext();

    return (
      <div
        className={cn(
          "text-body-3 text-text-primary inline-flex items-center justify-between gap-[24px] transition-colors",
          className,
        )}
        {...commonProps}
        ref={ref}
      >
        {Array.from(Array(DAYS_IN_WEEK), (_, index) => index).map((day) => (
          <DayOfWeekPickerItem
            key={day}
            day={day}
            // 객체·배열이 아닌 원시값(boolean)만 넘김 → memo의 얕은 비교가 정확하게 동작
            isCurrent={value === day}
            isDisabled={disabledDays?.includes(day) ?? false}
            isCompleted={completed[day] ?? false}
            isError={errorDays?.[day] ?? false}
            // setValue는 useControllableState가 안정된 참조로 주므로 그대로 넘겨도 memo가 깨지지 않음
            onItemClick={onItemClick}
          >
            {DayTable[day]}
          </DayOfWeekPickerItem>
        ))}
      </div>
    );
  },
);
DayOfWeekPickerImpl.displayName = DAY_OF_WEEK_PICKER_IMPL_NAME;

// ===== [변경 2] Item의 props 타입: 파생값(boolean)과 핸들러만 받음 =====
export type DayOfWeekPickerItemProps = React.HTMLAttributes<HTMLDivElement> & ItemProps;
type ItemProps = {
  day: Days;
  isCurrent: boolean;
  isDisabled: boolean;
  isCompleted: boolean;
  isError: boolean;
  onItemClick: (day: Days) => void;
};

// ===== [변경 3] Item을 React.memo로 감싸서 경로 1(부모→자식 리렌더)을 차단 =====
//
// memo는 "이전 props와 새 props가 얕은 비교로 전부 같으면 리렌더를 건너뜀"
// - day, isCurrent, isDisabled, isCompleted, isError: 원시값 → 값이 같으면 같다고 판단
// - onItemClick: 안정된 참조 → 같다고 판단
// - children: DayTable[day]는 문자열 리터럴 → 같다고 판단
// 그래서 Impl이 리렌더되어도 props가 안 바뀐 Item은 스킵됨
const DayOfWeekPickerItem = memo(
  forwardRef<HTMLDivElement, DayOfWeekPickerItemProps>(
    ({ day, isCurrent, isDisabled, isCompleted, isError, onItemClick, children }, ref) => {
      // Context 구독 없음 → Context value가 바뀌어도 이 컴포넌트는 직접 영향을 받지 않음

      const handleClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
        if (isDisabled) return;

        e.preventDefault();
        onItemClick(day);
      };

      return (
        <div
          className={cn(
            "flex h-[30px] w-[30px] items-center justify-center rounded-full border-none transition-colors duration-150",
            {
              "md:hover:bg-brand-primary-600": !isDisabled,
            },
            {
              "bg-background-sub3": isCompleted,
            },
            {
              "cursor-not-allowed bg-gray-200 opacity-50": isDisabled,
            },
            {
              "bg-notification": isError,
            },
            {
              "bg-brand-primary-500": isCurrent,
            },
          )}
          ref={ref}
          onClick={handleClick}
        >
          {children}
        </div>
      );
    },
  ),
);
DayOfWeekPickerItem.displayName = DAY_OF_WEEK_PICKER_ITEM_NAME;

export default DayOfWeekPicker;

[DevelopSoo]

4번 예시 코드

"use client";

import React, {
  createContext,
  forwardRef,
  memo,
  useContext,
  useLayoutEffect,
  useRef,
  useSyncExternalStore,
} from "react";

import { Days } from "./Days";
import useControllableState from "../../hooks/useControllableState";
import { cn } from "../../lib/utils";

const DayTable = ["월", "화", "수", "목", "금", "토", "일"] as const;

const DAY_OF_WEEK_PICKER_NAME = "DayOfWeekPicker";
const DAY_OF_WEEK_PICKER_ITEM_NAME = "DayOfWeekPickerItem";
const DAY_OF_WEEK_PICKER_IMPL_NAME = "DayOfWeekPickerImpl";
const DAYS_IN_WEEK = 7;

const EMPTY_COMPLETED: boolean[] = Array.from(Array(DAYS_IN_WEEK), () => false);
const EMPTY_DISABLED_DAYS: Days[] = [];

// ===== [변경 1] 아주 작은 외부 스토어 =====
//
// zustand가 내부에서 하는 일을 최소한으로 흉내 낸 것.
// - getState  : 현재 상태 반환
// - setState  : 상태를 바꾸고 구독자들에게 "바뀌었어" 알림
// - subscribe : 구독 등록. 해제 함수를 돌려줌
//
// React 컴포넌트 트리와 무관하게 존재하므로, 부모→자식 리렌더(경로 1)와 완전히 분리됨

type StoreState = {
  value: Days;
  completed: boolean[];
  disabledDays: Days[];
  errorDays?: boolean[];
  onItemClick: (day: Days) => void;
};

type Store = {
  getState: () => StoreState;
  setState: (partial: Partial<StoreState>) => void;
  subscribe: (listener: () => void) => () => void;
};

const createStore = (initial: StoreState): Store => {
  let state = initial;
  const listeners = new Set<() => void>();

  return {
    getState: () => state,
    setState: (partial) => {
      state = { ...state, ...partial };
      listeners.forEach((listener) => listener());
    },
    subscribe: (listener) => {
      listeners.add(listener);

      return () => listeners.delete(listener);
    },
  };
};

// ===== [변경 2] Context에는 "상태"가 아니라 "스토어"를 담음 =====
//
// 스토어 객체는 컴포넌트 생애 동안 한 번만 만들어져 참조가 절대 안 바뀜
// → Context value가 바뀌는 일이 없으므로 Context로 인한 리렌더(경로 2)가 원천 차단됨
// → Context는 이제 "스토어를 자식에게 건네주는 통로" 역할만 함

const StoreContext = createContext<Store | null>(null);

const useStoreContext = () => {
  const store = useContext(StoreContext);
  if (!store) {
    throw new Error(
      "DayOfWeekPicker components must be used within a <DayOfWeekPicker> component.",
    );
  }

  return store;
};

// ===== [변경 3] selector 기반 구독 훅 =====
//
// useSyncExternalStore(subscribe, getSnapshot)
// - subscribe   : 스토어에 "바뀌면 알려줘" 등록
// - getSnapshot : 현재 값을 꺼냄. React는 이 결과가 (Object.is 기준) 이전과 다를 때만 리렌더
//
// selector가 원시값(boolean, number)을 돌려주면
// "스토어는 바뀌었지만 내가 관심 있는 조각은 그대로" → 리렌더 스킵이 자동으로 됨
//
// ※ selector가 객체/배열을 새로 만들어 돌려주면 매번 다르다고 판단해 무한 리렌더가 나므로
//   반드시 원시값 또는 스토어 안에 이미 있는 참조를 돌려줘야 함

const useStore = <T,>(selector: (state: StoreState) => T): T => {
  const store = useStoreContext();

  return useSyncExternalStore(
    store.subscribe,
    () => selector(store.getState()),
    () => selector(store.getState()), // 서버 렌더링용 스냅샷 (여기선 동일)
  );
};

export type DayOfWeekPickerProps = React.HTMLAttributes<HTMLDivElement> & WrapperProps;
type WrapperProps = {
  currentDay?: Days;
  onCurrentDayChange: (value: Days) => void;
  defaultDay?: Days;
  completed?: boolean[];
  disabledDays?: Days[];
  errorDays?: boolean[];
};

const DayOfWeekPicker = forwardRef<HTMLDivElement, DayOfWeekPickerProps>(
  (
    {
      currentDay,
      onCurrentDayChange,
      completed,
      defaultDay = Days.Monday,
      disabledDays,
      errorDays,
      ...commonProps
    },
    ref,
  ) => {
    const [value, setValue] = useControllableState({
      prop: currentDay,
      defaultProp: defaultDay,
      onChange: onCurrentDayChange,
    });

    const resolvedValue = value || defaultDay;
    const resolvedCompleted = completed || EMPTY_COMPLETED;
    const resolvedDisabledDays = disabledDays || EMPTY_DISABLED_DAYS;

    // ===== [변경 4] 스토어를 컴포넌트당 한 번만 생성 (useRef) =====
    // useRef에 넣으면 리렌더되어도 같은 스토어 객체가 유지됨
    const storeRef = useRef<Store | null>(null);
    if (storeRef.current === null) {
      storeRef.current = createStore({
        value: resolvedValue,
        completed: resolvedCompleted,
        disabledDays: resolvedDisabledDays,
        errorDays,
        onItemClick: setValue,
      });
    }

    // ===== [변경 5] props / state가 바뀌면 스토어에 밀어넣음 =====
    //
    // 렌더 중에 setState를 호출하면 안 되므로(다른 컴포넌트를 렌더 도중 갱신하는 셈) 레이아웃 이펙트에서 동기화
    // 스토어가 바뀌면 관심 있는 Item만 selector 결과 비교를 거쳐 리렌더됨
    //
    // ※ 트레이드오프: "부모 렌더 → 이펙트에서 스토어 갱신 → Item 리렌더" 두 단계라
    //   Context 방식보다 한 프레임 늦게 반영될 수 있음 (useLayoutEffect라 화면엔 안 보임)
    useLayoutEffect(() => {
      storeRef.current?.setState({
        value: resolvedValue,
        completed: resolvedCompleted,
        disabledDays: resolvedDisabledDays,
        errorDays,
        onItemClick: setValue,
      });
    }, [resolvedValue, resolvedCompleted, resolvedDisabledDays, errorDays, setValue]);

    return (
      // 스토어 참조는 절대 안 바뀜 → 이 Provider는 Consumer를 리렌더시키지 않음
      <StoreContext.Provider value={storeRef.current}>
        <DayOfWeekPickerImpl ref={ref} {...commonProps} />
      </StoreContext.Provider>
    );
  },
);

DayOfWeekPicker.displayName = DAY_OF_WEEK_PICKER_NAME;

// ===== [변경 7] Impl을 memo로 감싸 경로 1(부모→자식 리렌더)을 차단 =====
//
// 이게 없으면: 클릭 → setValue → Picker 리렌더 → Impl 리렌더 → Item 7개 리렌더 (경로 1)
//              → 스토어 selector가 아무리 정교해도 어차피 전부 리렌더됨
// 이게 있으면: Picker가 리렌더되어도 Impl의 props(className 등)가 같으면 스킵
//              → Item은 오직 스토어 구독(selector)으로만 리렌더됨 ✅
//
// 외부 스토어를 써도 "경로 1 끊기"는 여전히 별도로 해야 한다는 점에 주의
// (zustand를 쓰더라도 이 구조라면 똑같이 memo 또는 children 패턴이 필요함)
const DayOfWeekPickerImpl = memo(
  forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
    ({ className, ...commonProps }, ref) => {
      return (
        <div
          className={cn(
            "text-body-3 text-text-primary inline-flex items-center justify-between gap-[24px] transition-colors",
            className,
          )}
          {...commonProps}
          ref={ref}
        >
          {Array.from(Array(DAYS_IN_WEEK), (_, index) => index).map((day) => (
            <DayOfWeekPickerItem key={day} day={day}>
              {DayTable[day]}
            </DayOfWeekPickerItem>
          ))}
        </div>
      );
    },
  ),
);
DayOfWeekPickerImpl.displayName = DAY_OF_WEEK_PICKER_IMPL_NAME;

export type DayOfWeekPickerItemProps = React.HTMLAttributes<HTMLDivElement> & ItemProps;
type ItemProps = {
  day: Days;
};

// ===== [변경 6] Item이 "자기에게 필요한 boolean 조각"만 selector로 구독 =====
//
// value가 2→3으로 바뀌면 스토어가 구독자 7개에게 전부 알림을 보내지만,
// React가 각 Item의 getSnapshot을 다시 실행해 이전 값과 비교:
//   - day=2: isCurrent true→false  → 다름 → 리렌더
//   - day=3: isCurrent false→true  → 다름 → 리렌더
//   - 나머지: false→false          → 같음 → 스킵 ✅
//
// C 버전과 결과는 같지만, Item이 props가 아니라 스스로 구독하므로
// "어디에 놓여도 알아서 동작하는" 합성 컴포넌트 성격이 유지됨
// (memo도, Impl의 파생값 계산도 필요 없음)
const DayOfWeekPickerItem = forwardRef<HTMLDivElement, DayOfWeekPickerItemProps>(
  ({ day, children }, ref) => {
    const isCurrent = useStore((s) => s.value === day);
    const isDisabled = useStore((s) => s.disabledDays.includes(day));
    const isCompleted = useStore((s) => s.completed[day] ?? false);
    const isError = useStore((s) => s.errorDays?.[day] ?? false);
    const onItemClick = useStore((s) => s.onItemClick); // 함수 참조는 안정적이므로 그대로 선택해도 OK

    const handleClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
      if (isDisabled) return;

      e.preventDefault();
      onItemClick(day);
    };

    return (
      <div
        className={cn(
          "flex h-[30px] w-[30px] items-center justify-center rounded-full border-none transition-colors duration-150",
          {
            "md:hover:bg-brand-primary-600": !isDisabled,
          },
          {
            "bg-background-sub3": isCompleted,
          },
          {
            "cursor-not-allowed bg-gray-200 opacity-50": isDisabled,
          },
          {
            "bg-notification": isError,
          },
          {
            "bg-brand-primary-500": isCurrent,
          },
        )}
        ref={ref}
        onClick={handleClick}
      >
        {children}
      </div>
    );
  },
);
DayOfWeekPickerItem.displayName = DAY_OF_WEEK_PICKER_ITEM_NAME;

export default DayOfWeekPicker;