[React] 슬라이드 모달창(Modal) 구현 (feat. React-Redux)

[React] 슬라이드 모달창(Modal) 구현 (feat. React-Redux)

 

React-Redux 없이 Modal 구현(21/11/10)

 

showModal 변수를 useState를 이용하여 on / off 기능을 통해 모달을 구현하였다.

클릭시 openModal 함수가 실행되어 showModal값이 false에서 true로 바뀌고

모달창이 pop-up되었을 때 배경(Background)을 누르면 clsoseModal 함수가 실행되어 다시 false로 바뀌어 모달창이 꺼진다.

 

// index.js

import React, { useState } from "react";
import SideBarModal from "../../../components/Modal/SideBarModal.js";
...

export default function Header(props) {
  const { rooms, roomId, setRoomId } = props;

  // 모달창
  const [showModal, setShowModal] = useState(false);
  const openModal = () => {
    setShowModal(true);
  }
  const closeModal = () => {
    setShowModal(false);
  }

  return (
	...
      </div>
      <div className={cx("item","itemHistory")}>
        <button onClick={openModal}>나의 기록</button>
        <SideBarModal showModal={showModal} closeModal={closeModal} ></SideBarModal>
      </div>
    ...
  );
}

 

// SideBarModal.js

import "./SideBarModal.css";

export default function SideBarModal ({showModal, closeModal}) {
    return (
        <>
        {showModal ? 
            <div className="Background" onClick={closeModal}>
                <div className="ModalContainer">
                    <div>메뉴</div>
                </div>
           </div> : null}
        </>
    );
}

 

 

참조 : https://velog.io/@tlatjdgh3778/React%EC%97%90%EC%84%9C-Modal-%EA%B5%AC%ED%98%84

 

Modal  왼쪽으로 이동 + 모달창 클릭시 안꺼지기 (21/11/11)

모달이 중간에 구현되어 있었는데, 왼쪽에서 샤라락 슬라이딩하면서 나오는 걸 구현하고 싶어졌다.

그러기 위해 먼저 css를 수정하여 왼쪽으로 이동시켰다.

다른 이슈는 모달창 클릭시 모달창이 꺼졌는데 이것은 Background 내에 ModalContainer가 들어간 상태이고, Background에 onClick 이벤트를 closeModal 함수가 실행되어 showModal = false가 되어 꺼지도록 되어있기 때문이다.

모달창 클릭시 안꺼지기 위해선 아래와 같이  ModalContainer를 Background에서 꺼내면 해결되었다.

(아래 코드 indent가 이상한데..... 티스토리 버그인듯ㅠㅠ)

 

// SideBarModal.js

import "./SideBarModal.css";

export default function SideBarModal ({showModal, closeModal}) {
    return (
        <>
        {showModal ? 
        <>
        	<div className="Background" onClick={closeModal}></div>
            <div className="ModalContainer">
	            <div>메뉴</div>
            </div>
        </>
            : null}
        </>
    );
}

 

 

 

Modal  slide 구현 (21/11/11)

 

slide 구현을 위해서 처음에 아래와 같이 showModal의 값에 따라 Modal의 className이 ModalContainer->hidden으로 바뀌게 설정했는데, slide가 되지 않았다.(코드가 조금 다를 수 있지만 로직만 참조) slide 구현을 위해 css에서 transition을 이용하여 구현을 시도했다. ModalContainer을 시작으로 hidden으로 같은 창이 변화한다고 인식하지 않고, 그냥 새로 띄우는 게 안되는 원인이었다.

 

// SideBarModal.js

export default function SideBarModal ({showModal, closeModal}) {
    return (
        {showModal ?
            <>
                <div className="Background" onClick={closeModal} />
                <div className="ModalContainer">
                    <div>리스트 제목</div>
                </div>
            </>
            : 
            <>
                <div className="Background" onClick={closeModal} />
                <div className="hidden">
                    <div>리스트 제목</div>
                </div>
            </>}
    );
}

// SideBarModal.css

.ModalContainer {
    left: 176px;
	...
    transition: all 1s;
}

.hidden {
    left: -177px;
	...
    transition: all 1s;
}

 

그래서 아래와 같이 같은 DOM 요소에 className을 변경해주는 로직으로 바꾸니 해결 !

 

// SideBarModal.js

export default function SideBarModal ({showModal, closeModal}) {
    return (
        <>
            <div className={showModal ? "Background" : null} onClick={closeModal} />
            <div className={showModal ? "ModalContainer" : "hidden"}>
                <div>리스트 제목</div>
            </div>
        </>
    );
}

 

2중 모달 구현 (21/11/12)

 

React-Redux 이용하여 Modal 구현(21/11/14)

redux를 어떻게 적용시킬까 고민... 쓰는 방식, 함수들 뿐만아니라 폴더 및 파일 나누는 구조도 다양해서 정하기 쉽지 않았다. 일단 구현이 되면 최적화하는 방향으로 설정.

redux ducks 구조를 타겟으로 actions 폴더와 reducers 폴더를 redux라는 폴더 하위에 넣음.

• reducers는 combineReducers를 이용하여 reducer 함수들을 묶는 root reducer인 index.js 파일과 sub reducer인 reducer 함수(modalOnOff.js)로 나뉨
• actions에는 타입을 나타내는 ActionTypes.js 파일과 액션 생성자 index.js 파일로 나뉨.

 

 

redux를 사용하기 위해 createStore를 이용해 store함수 생성과 reducer 함수와의 연결 구현

Provider로 전체를 App을 포함한 전체 영역을 감싸서 모든 하위 컴포넌트에 redux 사용 가능하게 함

 

// index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { createStore } from "redux";
import { Provider } from "react-redux";
import { reducers } from "./Redux/reducers";

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