11-3. context 분리, 핫리로드

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

11.3) Context 분리하기

해결된 질문

작성

수업을 따라 진행 중인데, 이 부분에 오류가 뜹니다.

export const TodoStateContext = createContext();

export const TodoDispatchContext = createContext();

Fast refresh only works when a file only exports components. Move your React context(s) to a separate file.eslint(react-refresh/only-export-components)

찾아보니 핫리로드 규칙 때문이라고 하는데요. 어떻게 해결할 수 있을까요?

react

답변 2

이정환 Winterlood

지식공유자

안녕하세요 이정환입니다.

우선 해당 오류는 기능적인 오류가 아닌, ESLint가 권장하는 코딩 스타일을 지키지 않아서 발생하는 경고 문구로 하나의 파일에서 여러개의 컴포넌트를 내보낼 경우 발생합니다.

따라서 보통은 빨간색 오류가 아닌, 노란색 경고가 발생할 텐데 혹시 지금 빨간색 오류가 발생하나요?

만약 그렇다면 eslint.config.js 파일에 rules 내에 아래의 내용을 추가하시면 됩니다!

"react-refresh/only-export-components" : "off"

진진

질문자

감사합니다

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 진진님께서 경험하신 오류는 React의 Fast Refresh 기능과 관련이 있습니다. 이 기능은 파일이 컴포넌트만을 내보낼 때 가장 효과적으로 작동하는데, 이 경우 Context를 포함한 다른 비 컴포넌트 요소가 함께 내보내질 때 경고 메시지를 발생시키곤 합니다.

해결 방안:

Context 분리:
- Context를 정의하는 파일을 개별적으로 나누어, 해당 파일에는 Context만을 내보내도록 구성해보세요. 예를 들어, contexts.js 라는 파일을 만들어 아래와 같이 내용을 분리할 수 있습니다.

   // contexts.js
   import { createContext } from "react";

   export const TodoStateContext = createContext();
   export const TodoDispatchContext = createContext();

컴포넌트 파일 내에서 컴포넌트만 내보내기:
- 원래 컴포넌트 파일에서는 Context를 import하여 사용하고, 컴포넌트만 내보내도록 합니다.

   // TodoApp.js
   import React from "react";
   import { TodoStateContext, TodoDispatchContext } from "./contexts";

   const TodoApp = () => {
     // 컴포넌트 로직
   };

   export default TodoApp;

추가 참고 링크:

React Context 사용 방법 - React에서 Context를 정의하고 사용하는 방법에 대해 더 자세히 설명한 답변입니다.

위의 방법을 통해 Fast Refresh 관련 경고 메시지를 제거하고 개발 환경에서의 번거로움을 줄일 수 있을 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변