Sourcetree
62
2020-03-25 18:45:04 작성 2020-03-25 18:46:14 수정됨
2
533

React+Redux 구조에서 최상위에 특정 ui를 두고 사용할 수 있나요?


안녕하세요 리액트 공부하며 개발하고 있습니다.

질문의 의미는 다름이 아니라

예를들어 어떤 Modal 컴포넌트를 만들었을때, 해당 Modal을 사용해야 하는 곳은 전부 render 안에 <Modal /> 태그를 넣어두고 사용해야 하니깐 조금 비효율적인것 같아서요

앱의 최상위 부분에 <Modal />을 딱 넣어두고 Redux 같은 곳에 해당 Modal의 Ref를 갖고 있으면

앱 어디서나 해당 Modal을 호출할 수 있는거 아닐까 싶은 생각이 드는데요,

개발진행하며 리액트+리덕스 구조를 익혀가는 중이라 이게 이론적으로 가능한건지 잘 모르겠네요..

일단 당장 <Modal />을 넣어야하는 위치도 헷갈리고, 또 해당 모달의 Ref변수를 어떻게 store에 넣어야할지도 감이 안오네요 ㅠㅠ 


혹시 이게 안되는거라면.. 보통 일반적으로 이런 경우에 어떤 구조가 가장 최적인지 의견주시면 감사하겠습니다! 




0
  • 답변 2

  • Frontend Maker
    695
    2020-03-25 20:43:20

    Redux의 메인테이너인 Mark Erikson이 쓴 Practical Redux, Part 10: Managing Modals and Context Menus 를 보면 상당히 잘 설명하고 있습니다.

    간단하게 요약하자면, <ModalManager /> 컴포넌트가 전체 모달들을 모두 관리하는데 props로 모달의 타입과 모달의 props를 넘깁니다. 받은 모달의 타입을 통해서 미리 만들어 놓은 "모달 룩업 테이블" 에서 현재 보여져야 하는 모달이 어떤 모달인지 찾습니다. 이 방식을 통해서 모달을 활성화시킵니다. 코드로 보면 더욱 직관적입니다. 이외에도 모달을 어떻게 쌓는지(Stackable)에 관한 내용도 나와있으니 관심있으시다면 찾아보시길 바랍니다.

    import React, {Component} from "react";
    import {connect} from "react-redux";
    
    import TestModal from "./TestModal";
    
    const modalComponentLookupTable = {
        TestModal
    };
    
    const mapState = (state) => ({currentModal : state.modals});
    
    export class ModalManager extends Component {
        render() {
            const {currentModal} = this.props;
    
            let renderedModal;
    
            if(currentModal) {
                const {modalType, modalProps = {}} = currentModal;
                const ModalComponent = modalComponentLookupTable[modalType];
    
                renderedModal = <ModalComponent {...modalProps} />;
            }
    
            return <span>{renderedModal}</span>
        }
    }
    
    export default connect(mapState)(ModalManager);


  • Sourcetree
    62
    2020-03-26 12:39:22

    배하람

    확실히 제가 원하던 구조입니다 참고해보겠습니다! 답변 너무 감사드립니다!


  • 로그인을 하시면 답변을 등록할 수 있습니다.