react-refresh/only-export-components

react-refresh는 "핫 리로딩"보다 더 똑똑하게 작동합니다

 

 

Fast Refresh는 컴포넌트만 재실행하고 상태를 유지하려고 합니다.
이를 위해서는 "무조건 컴포넌트만 export" 되어 있어야 합니다.

 

React Refresh는 컴포넌트를 감지하지 못하거나, 잘못 감지해서 리프레시 후 상태 유지가 안 됩니다.

 

 

>> shadcn ThemeProvider 작성시 

// src/shared/providers/ThemeContext.ts
import { createContext } from 'react'

export type Theme = 'dark' | 'light' | 'system'

export const STORAGE_KEY = 'vite-ui-theme'

export type ThemeContextType = {
    theme: Theme
    setTheme: (theme: Theme) => void
}

export const initialState: ThemeContextType = {
    theme: 'system',
    setTheme: () => null,
}

export const ThemeContext = createContext<ThemeContextType>(initialState)

 

 

다음과 같이 별도의 파일로 관리 

• ThemeContext는 컴포넌트가 아니기 때문에 Fast Refresh 대상이 아닙니다.
• 이를 ThemeProvider.tsx에 같이 두면, Vite가 잘못된 대상까지 Fast Refresh하려고 시도해서 문제가 생깁니다.
• 특히 상태가 꼬이거나, Provider 바깥의 구독자 컴포넌트가 업데이트 안 되는 현상이 발생할 수 있습니다.