리덕스로 모달 상태 제어하기 [번역]

🐱‍👤 원문 : https://betterprogramming.pub/react-use-redux-to-control-modal-visibility-states-8953e44b71fd

React: Use Redux To Control Modal Visibility States

부제 : 모달 열기 및 닫기 상태를 쉽게 관리하는 법

 

모달은 응용 프로그램의 기본 창 위에 위치하며 현재 상호 작용 흐름을 방해하지 않으면서 사용자가 의사 결정을 내리는 데 도움이 되는 UI 요소이다. 또한 사용자의 작업에 대한 피드백을 제공하기도 하고 앱의 현재 경로나 페이지를 변경하지 않은 채 일부 콘텐츠를 제공하는 역할을 한다.

리액트에서 리덕스를 사용하여 모달의 표시 여부를 제어하는 방법에 대해 알아보자. 먼저 애플리케이션 예제를 살펴본 다음 시간도 많이 절약되고 컴포넌트의 코드 길이를 크게 줄일 수 있는 리덕스 사용법을 알아보자.

 

---

🌯 애플리케이션

우리가 사용할 애플리케이션은 사용자가 Yes 또는 No를 클릭할 수 있는 모달을 여는 간단한 버튼이다.

// main-component-v1.js 
const MainComponent = () => {
  const [ isOpen, setIsOpen ] = useState(false)
  const [ modalStatus, setModalStatus ] = useState('')

  const closeModal = () => setIsOpen(false)
  const showModal = () => setIsOpen(true)

  const onYesPressed = () => {
    setModalStatus("User pressed yes")
    closeModal()
  } 

  const onNoPressed = () => {
    setModalStatus("User pressed no")
    closeModal()
  }

  return (
    <>
      <div style={buttonContainerStyle}>
        <button style={openModalButtonStyle} onClick={showModal}>Open</button>
        { modalStatus ?? <span>{ modalStatus }</span> }
      </div>
      <YesNoModal
        isOpen={isOpen}
        onRequestClose={closeModal}
        onYesPressed={onYesPressed}
        onNoPressed={onNoPressed}
      />
    </>
  );
};

 

이 방식의 경우 MainComponent에 직접 정의된 isOpen 속성을 사용해 모달 표시 여부를 제어하고 있다. IsOpen 속성이 true이면 모달이 표시되고 그렇지 않으면 숨겨진다.

하나의 컴포넌트에서만 이 모달을 사용하면 이 방식에는 전혀 문제가 없다. 하지만, 이 모달을 다른 컴포넌트에서 사용하려고 하면 이 방식은 많은 코드 중복을 초래할 수 있다.

이 모달을 사용할 때마다 모달의 열린 상태를 제어하는 모든 코드가 중복될 것이다. 이 모달을 사용하는 모든 컴포넌트들은 각각 IsOpen 속성을 정의해 상태를 제어해야 할 것이다.

이 모달의 상태를 변경하기 위해, 또 상태 제어를 중앙 집중화하기 위해 어떤 액션을 호출할 수 있다면 어떨까? 리덕스를 사용해보자!

 

---

🌯 리덕스가 작동하는 방식

전체적으로(globally) 상태를 관리하는 일은 매우 복잡할 수 있다. 리덕스는 우리가 상태 관리를 더 잘할 수 있도록 도와준다. 간단히 말해, 리덕스는 리액트 앱의 상태/논리를 중앙 집중화할 수 있는 도구이다. 리덕스를 사용하면 모달 상태 제어를 이 권한이 필요한 모든 컴포넌트에 위임(delegate) 하지 않아도 된다.

리덕스 적용 예제로 들어가기 전에 리덕스의 세 가지 주요 요소인 Action, Reducer, Store에 대해 간단히 알아보자.

Action은 컴포넌트가 나머지 응용 프로그램에게 일부 상태를 업데이트하고 싶다고 알리기 위해 호출하는 이벤트이다. 우리의 경우 YesNoModal을 열거나 닫아야 한다고 말하는 Action을 호출할 것이다.

Reducer는 초기 상태와 Action을 받아 이를 기반으로 로직을 수행하고, 새로운 상태를 리턴하는 순수한 함수이다.

마지막으로, Store는 애플리케이션의 전체 글로벌 상태를 저장하는 메커니즘이다. 우리는 Action을 호출해 이 글로벌 상태를 업데이트하고 Reducer에서 이들을 처리할 것이다.

리덕스가 어떻게 작동하는지 몇 줄의 텍스트로 설명하기는 어렵지만, 코드를 보면 훨씬 더 분명해질 것이다.

 

---

🌯 리덕스 설치

리덕스를 설치하면서 시작해보자.

npm install redux -s

 

리덕스 자체 외에도 React-redux 라이브러리도 설치한다. React-redux는 리액트의 공식 바인딩으로 글로벌 상태가 언제 변경되었는지 컴포넌트에게 알려주고 해당 변경에 따라 재렌더링할 수 있도록 도움을 준다.

npm install redux-react -s

 

---

🌯 modalsReducer.js

modalsReducer는 컴포넌트에 의해 트리거 된 Action을 기반으로 하는 로직을 수행하는 곳이다. 이 예시에선 모달이 하나밖에 없지만 이 Reducer를 사용해 더 많은 모달들을 관리할 수도 있다.

// modalsReducers.js
const initialState = {
    showYesNoModal: false
}

export function modalsStore(state = initialState, action) {
    const actions = {
        "ShowYesNoModal" : {
            ...state,
            showYesNoModal: true
        },
        "HideYesNoModal" : {
            ...state,
            showYesNoModal: false
        }
    }

    return actions[action.type] || state
}

 

Reducer는 초기 상태 객체와 상태를 업데이트해야 할 때 호출되는 함수로 구성된다. modalsStore 함수는 매개 변수로 상태와 Action을 받는다. 이 Action은 현재 상태에서 어떤 변화를 만들어야 하는지 말해준다.

만약 Action의 타입이 ShowYesNoModal라면, showYesNoModal 값을 true로 세팅하는 새로운 상태(모달이 표시된 상태)를 리턴한다. 모달이 한 번 열리면, showYesNoModal의 값이 false인 새로운 상태를 리턴하며 HideYesNoModal 타입을 가진 Action을 디스패치(dispatch)해 모달을 닫을 수 있다.

이 Reducer를 우리의 컴포넌트에 연결시키기 위해, index.js 파일을 수정해준다.

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import { modalsStore } from './store/modals.store';
import { combineReducers } from 'redux';
import { createStore } from 'redux';

var rootReducer = combineReducers({ modalsStore })
const store = createStore(rootReducer);

ReactDOM.render(
  <Provider store={store}>
    <React.StrictMode>
      <App />
    </React.StrictMode>,
  </Provider>,  
  document.getElementById('root')
);

 

기본적으로, 우리는 앱을 Provider 컴포넌트로 감싸면서 Store를 만들고 컴포넌트에 연결한다. 그렇게 하면 컴포넌트는 Action을 디스패치할 수 있고 상태 변화를 감지할 수 있다. 우리는 여러 개의 Reducer들을 결합할 수도 있다. 이 예시에서 우린 modalReducer만 다루지만, notificationReducer, alertReducer 등 다양한 Reducer를 사용할 수 있다.

MainComponent를 연결해 YesNoModal을 표시하기 위해 Action을 디스패치해보자.

// MainComponentRedux.js
import YesNoModal from './YesNoModal'
import React, { useState } from 'react';
import { connect } from 'react-redux'
import { openModalButtonStyle, buttonContainerStyle } from './MainComponent.styles'

const MainComponent = ({ showYesNoModal }) => {
  const [ modalStatus, setModalStatus ] = useState('')

  const onYesPressed = () => {
    setModalStatus("User pressed yes")
  } 

  const onNoPressed = () => {
    setModalStatus("User pressed no")  
  }

  return (
    <>
      <div style={buttonContainerStyle}>
        <button style={openModalButtonStyle} onClick={showYesNoModal}>Open</button>
        { modalStatus ?? <span>{ modalStatus }</span> }
      </div>
      <YesNoModal
        id="modal-id"
        onYesPressed={onYesPressed}
        onNoPressed={onNoPressed}
      />
    </>
  );
};

const mapDispatchToProps = (dispatch) => ({
  showYesNoModal: () => dispatch({ type: "ShowYesNoModal" })
})

export default connect(null, mapDispatchToProps)(MainComponent);

 

이렇게 하면 MainComponent에서 모달 오픈 상태가 더 이상 필요 없다. MainComponent가 더이상 모달의 상태를 관리하지 않아도 된다는 의미이다. 대신, 속성으로 showYesNoModal 함수를 받았고 이 것이 모달이 열려야 할 때 호출될 것이다.

하지만 이 showYesNoModal이 어디서 올까? 이 함수는 코드의 마지막 줄에서 컴포넌트에 mapDispatchtoProps를 연결할 때 속성으로 전달된다.

기본적으로 우리는 ShowYesNoModal 타입의 Action을 전송하고 있으며 이는 Reducer에 의해 캡처되고 상태 변화를 트리거한다.

이제 우리는 모달을 표시하기 위해 YesNoModal에서의 상태 변화를 감지해야 한다.

// YesNoModal.js
import React from 'react';
import Modal from 'react-modal';
import { connect } from 'react-redux'

const YesNoModal = ({ closeModal, showModal, onYesPressed, onNoPressed }) => {

  const handleYesPressed = () => {
    onYesPressed()
    closeModal()
  }

  const handleNoPressed = () => {
    onNoPressed()
    closeModal()
  }

  return (
    <Modal
      isOpen={showModal}
      onRequestClose={closeModal}
      style={customStyles}
  >
    <div>Are you sure?</div>

    <div>
      <button style={buttonStyle} onClick={handleYesPressed}>Yes</button>
      <button style={buttonStyle} onClick={handleNoPressed}>No</button>
    </div>
  </Modal>
  );
};

const mapStateToProps = (state) => {
  return {
    showModal: state.modalsStore.showYesNoModal 
  }
}

const mapDispatchToProps = (dispatch) => ({
  closeModal: () => dispatch({ type: "HideYesNoModal" })
})

export default connect(mapStateToProps, mapDispatchToProps)(YesNoModal);

 

상태를 속성에 매핑시킬 때(33번째 줄), 기본적으로 글로벌 Store의 모든 상태 변화를 읽을 수 있다. mapStateToProps 함수는 글로벌 상태 객체를 받고 이것을 모달의 표시 여부를 관리하는 속성을 가진 또 다른 객체에 매핑시킨다.

showModal 속성 이외에도, 컴포넌트는 closeModal이라 불리는 함수를 받는다. 한 번 호출되면, 모달의 표시 여부 속성을 false로 세팅하며, Reducer에 의해 캡쳐되고 상태를 업데이트하는 HideYesNoModal 타입을 가진 Action을 디스패치할 것이다.

 

이 것이 바로 리덕스에 의해 관리되는 글로벌 상태들을 사용해 모달을 제어하는 방법이다. 이 시점에서, "같은 결과를 얻기 위해 더 많은 코드를 작성해야 하는데 왜 리덕스를 사용해야 할까?"라는 의문이 생길 것이다.

위의 예시에서 우리는 단 하나의 모달만을 사용했다. 만약 우리가 더 많은 다른 모달들을 사용하면 어떨까? 컴포넌트에서 직접 필요할 때마다 모달 상태를 관리할 것인가? 아마 아닐 것이다!

한 번 첫 번째 Reducer를 작성하고 app에 연결해 놓으면, 새로운 Reducer를 구현하는 것은 상당히 간단할 것이다. 그것들을 index.js 파일에 임포트하고 Store를 만들 때 결합하기만 하면 된다.

내 예전 프로젝트 중 하나에서 실제로 구현했던 Reducer를 공유하고자 한다. 이 글에서 논의한 내용과 정확히 같을 것이다.

// real-life-example.js
import { modalConstants } from '../constants';

const initialState = {
  showUserRegisterModal: false,
  showSchoolDetailsModal: false,
  showAdvancedQueryModal: false,
};

export function modals(state = initialState, action) {
  const actions = {
    [modalConstants.SHOW_USER_REGISTER_MODAL]: {
      ...state,
      showUserRegisterModal: true,
      message: action.message,
      redirectAfterRegister: action.redirectAfterRegister,
      actionToExecuteAfterRegister: action.actionToExecuteAfterRegister,
    },
    [modalConstants.CLOSE_USER_REGISTER_MODAL]: {
      ...state,
      showUserRegisterModal: false,
    },
    [modalConstants.SHOW_ADVANCED_QUERY_MODAL]: {
      ...state,
      showAdvancedQueryModal: true,
    },
    [modalConstants.CLOSE_ADVANCED_QUERY_MODAL]: {
      ...state,
      showAdvancedQueryModal: false,
    },
    [modalConstants.SHOW_SCHOOL_MODAL]: {
      ...state,
      showSchoolDetailsModal: true,
      school: action.school,
    },
    [modalConstants.CLOSE_SCHOOL_MODAL]: {
      ...state,
      showSchoolDetailsModal: false,
    },
    [modalConstants.SHOW_LOGIN_MODAL]: {
      ...state,
      message: action.message,
      showLoginModal: true,
    },
    [modalConstants.CLOSE_LOGIN_MODAL]: {
      ...state,
      showLoginModal: false,
    },
    [modalConstants.SHOW_SEARCHES_MODAL]: {
      ...state,
      showSearchesModal: true,
      searches: action.searches,
    },
    [modalConstants.CLOSE_SHOW_SEARCHES_MODAL]: {
      ...state,
      showSearchesModal: false,
    },
    [modalConstants.SHOW_FAVORITE_SCHOOLS_MODAL]: {
      ...state,
      showFavoriteSchoolsModal: true,
      schools: action.schools,
    },
    [modalConstants.CLOSE_FAVORITE_SCHOOLS_MODAL]: {
      ...state,
      showFavoriteSchoolsModal: false,
    },
    [modalConstants.SHOW_SCHOOLS_TO_VISIT_MODAL]: {
      ...state,
      showShoolsToVisitModal: true,
      schools: action.schools,
    },
    [modalConstants.CLOSE_SCHOOLS_TO_VISIT_MODAL]: {
      ...state,
      showShoolsToVisitModal: false,
    },
    [modalConstants.SHOW_RECOVER_PASSWORD_MODAL]: {
      ...state,
      showRecoverPasswordModal: true,
    },
    [modalConstants.CLOSE_RECOVER_PASSWORD_MODAL]: {
      ...state,
      showRecoverPasswordModal: false,
    },
  };

  return actions[action.type] || state;
}

 

이 예제의 초점은 모달을 다루는 것이었지만, 이 접근법을 경고, 알림, 인증 등과 같이 애플리케이션 전체에서 상태 제어를 공유해야 하는 작업들로 확장할 수 있다.

오늘은 여기까지. 글이 어떤 식으로든 도움이 되었기를 바란다.

몸조심하시고 행복한 코딩 되길!
소스 코드는 깃허브에서 볼 수 있다.

 

 

🐱‍👤 참고 : -