개요

react-modal 라이브러리를 사용하고 있다가 Storybook에 등록하여 관리하고 싶어서 작성하는데

아래와 같이 컴포넌트를 작성했다가 스토리북 화면에서에러가 발생하였습니다.

강사님께서는 Modal의 경우 어떤식으로 해서 Storybook을 동작가능하게 하셨는지 궁금합니다.

현재는 Modal.setAppElement('body')로 처리하여 임시로 실행되게 하였으나, 더 좋은 다른 방법이 있을지 질문드립니다.

import Modal from 'react-modal';

Modal.setAppElement('#root'); 
// 모달이 열린 상태에서도 접근성을 보장하기 위해 필요합니다.

const BaseModal: React.FC<BaseModalProps> = ({

Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.

안녕하세요, 인프런 AI 인턴입니다.

배찬님의 질문에 대해 답변드리겠습니다. React에서 react-modal 라이브러리를 사용하면서 스토리북에 등록할 때 에러가 발생하는 경우는 종종 있을 수 있습니다. 특히, 이를 Storybook에 잘 등록하기 위해서는 몇 가지 설정이 필요할 수 있습니다.

문제 해결 방법:

setAppElement: 모달을 사용하는 앱에서 DOM 엘리먼트를 지정하여 접근성을 설정할 수 있습니다. Modal.setAppElement('#root') 처럼 현재 코드는 잘 작성되었으나, 스토리북에서는 기본 HTML 구조가 다르기 때문에 이 엘리먼트가 제대로 설정되지 않을 수 있습니다. 스토리북에서 특정 엘리먼트를 지정할 수 없을 때, 임시로 'body'를 사용하실 수도 있지만, 최선의 방법은 아닙니다.
스토리북의 Decorator 사용: 스토리북에서 컴포넌트의 컨텍스트나 프로바이더를 공급해야 할 때 decorators를 사용할 수 있습니다. 이는 특히, react-modal 사용 시 특정 DOM 구조에 의존하는 경우 유용합니다.

   import React from 'react';
   import { configure, addDecorator } from '@storybook/react';
   import { withProviders } from './withProviders'; // 만들어야 하는 커스텀 데코레이터
   
   addDecorator(withProviders);

withProviders 데코레이터 만들기: 필요한 React 컨텍스트나 프로바이더를 제공하는 데코레이터를 작성합니다.

   import { ModalProvider } from 'react-modal';
   
   // 모달과 같은 전역 상태가 필요한 경우 사용할 수 있음.
   export const withProviders = (Story) => (
     <ModalProvider>
       <Story />
     </ModalProvider>
   );

React Modal을 Storybook에서 사용할 때 주의: 일반적으로 Modal을 스토리북에서 사용할 때, 이는 원래 프로젝트의 HTML 구조를 사용할 수 없기 때문에 깨질 수 있습니다. 따라서 스토리북용 별도 설정이 필요합니다.

이 방법은 스토리북 환경을 구성하고, 해당 API들 및 에러 메세지에서 언급된 decorators를 적절히 설정하여 모달의 접근성을 높이는 방식입니다.

자세한 구현 방법에 대해서는 스토리북의 공식 문서를 참고하시면 좋습니다.

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

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

react에서 modal & portal 사용시 에는 어떻게 작성해야될까요

개요

문제 해결 방법: