React - react-modal

일상 코딩·2022년 5월 26일

React

목록 보기

21/45

01.설치

$ npm install react-modal
VS code 터미널창에서 해당 명령어를 입력하여 react-modal을 설치 합니다.

02.사용법

import
import Modal from 'react-modal';
파일 상단에 react-modal로 부터 Modal 객체를 import 해줍니다.

isOpen={boolean}
function App() {
  return (
    <Modal isOpen={true}>
      This is Modal content
    </Modal>
  )
}
Modal 태그의 isOpen 속성값(boolean)에 따라 모달창이 표시될 지 여부를 컨트롤 할 수 있습니다.

isOpen 값을 false로 바꾸면 모달창이 표시되지 않습니다.

state로 Modal 컨트롤하기
import React, { useState } from 'react';
import Modal from 'react-modal';

function App() {
  const [modalIsOpen, setModalIsOpen] = useState(false);
  return (
    <>
      <button onClick={()=> setModalIsOpen(true)}>Modal Open</button>
      <Modal isOpen={true}>
        This is Modal content
        <button onClick={()=> setModalIsOpen(false)}>Modal Open</button>
      </Modal>
    </>
  )
}  
state를 이용하면 버튼 클릭 이벤트가 발생할 때 마다 모달창을 컨트롤 할 수 있습니다.

useState를 사용해 모달의 isOpen 속성값을 상태로 관리해주면 이벤트에 콜백함수로 상태변경함수를 줘서 모달을 컨트롤 할 수 있다.

onRequestClose={callback}
import React, { useState } from 'react';
import Modal from 'react-modal';

function App() {
  const [modalIsOpen, setModalIsOpen] = useState(false);
  return (
    <>
      <button onClick={()=> setModalIsOpen(true)}>Modal Open</button>
      <Modal isOpen={true}
       onRequestClose={() => setModalOpen(false)}

        This is Modal content
        <button onClick={()=> setModalIsOpen(false)}>Modal Open</button>
      </Modal>
    </>
  )
}  
오버레이 부분을 클릭하거나 또는 Esc 키를 누를 시 모달 창이 닫히게 하려면 onRequestClose 속성값으로 isOpen 속성값을 false로 바꿔주는 콜백함수를 주면 된다.

shouldCloseOnOverlayClick={boolean}

import React, { useState } from 'react';
import Modal from 'react-modal';

function App() {
  const [modalIsOpen, setModalIsOpen] = useState(false);
  return (
    <>
      <button onClick={()=> setModalIsOpen(true)}>Modal Open</button>
      <Modal isOpen={true}
		shouldCloseOnOverlayClick={false}

        This is Modal content
        <button onClick={()=> setModalIsOpen(false)}>Modal Open</button>
      </Modal>
    </>
  )
}

오버레이 클릭은 막고 Esc 키만으로 모달창을 닫고 싶다면 shouldCloseOnOverlayClick 속성값을 false로 주면 된다.

Modal Styling

Modal의 스타일을 정의해주는 방법은 3가지가 있다.

Inline Styles

Classes

Transitions

Inline Styles

Modal에 style 속성에 content와 overlay 키를 이용해 모달의 content와 overlay 영역을 각각 스타일링 할 수 있습니다.
style 속성을 통해 정의한 값은 모달의 스타일 기본값과 병합됩니다.
기본 스타일은 Modal.defaultStyles 객체에 정의되어 있으며 그 값은 아래와 같습니다.

<Modal
  ...
  style={{
    overlay: {
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      backgroundColor: 'rgba(255, 255, 255, 0.75)'
    },
    content: {
      position: 'absolute',
      top: '40px',
      left: '40px',
      right: '40px',
      bottom: '40px',
      border: '1px solid #ccc',
      background: '#fff',
      overflow: 'auto',
      WebkitOverflowScrolling: 'touch',
      borderRadius: '4px',
      outline: 'none',
      padding: '20px'
    }
  }}
  ...
>

03.사용 예시

import React, { useCallback, useState } from "react"
import UserModal from "react-modal"

const Navigation = () => {
  const [modalIsOpen, setModalOpen] = React.useState(false)

  const [ID, setID] = useState("")
  const [PW, setPW] = useState("")

  const onChange = useCallback((e) => {
    setID(e.target.ID)
    setPW(e.target.PW)
  }, [])

  return (
    <>
      <NavigationStyle>
        <ThemeButton src={Light} onClick={handleClick} />
        <UserButton src={User} onClick={() => setModalOpen(true)} />

        <UserModal
          isOpen={modalIsOpen}
          onRequestClose={() => setModalOpen(false)}
          ariaHideApp={false}
          style={{
            content: {
              left: "2%",
              right: "12%",
              backgroundColor: "#7FFFD4",
            },
          }}

          <Closebtn src={Close} onClick={() => setModalOpen(false)} />

          <UserLogin>
            <UserIcon src={UserImg}></UserIcon>
            <form>
              <input
                type="text"
                name="userId"
                value={ID}
                onChange={onChange}
                style={{
                  width: "200px",
                  height: "30px",
                  fontSize: "20px",
                  margin: "10px",
                  borderRadius: "10px",
                }}
              />
              <br />
              <input
                type="password"
                name="userPW"
                value={PW}
                onChange={onChange}
                style={{
                  width: "200px",
                  height: "30px",
                  fontSize: "20px",
                  margin: "10px",
                  borderRadius: "10px",
                }}
              />
              <br />
              <LoginBtn>Login</LoginBtn>
              <SignupBtn>Sign Up</SignupBtn>
            </form>
          </UserLogin>
        </UserModal>
      </NavigationStyle>
    </>
  )
}

export default Navigation

react-modal: App element is not defined

React-modal을 사용하다보면 콘솔창에 위와 같은 에러 메시지가 나올 수 있다.

이런 경우에는 ariaHideApp={false}를 Modal 컴포넌트안에 추가해주면 해당 에러 메시지는 사라진다.

04.React에서 Input태그 값 입력 불가능한 현상 해결방법

문제 상황

HTML에서는 input 태그에 value 속성이 지정된 것과 상관없이 입력이 가능하지만 React에서는 value 속성만 지정하면 값이 입력되지 않는 현상이 있습니다.

원인

input 태그에 value 속성만 지정하면 value 속성으로만 값을 컨트롤할 수 있기때문에 사용자가 값을 입력하는 권한이 없어 input안에 값이 입력되지 않습니다.

해결 방안

onChange속성을 사용하여 input태그를 수정할 수 있는 상태로 만들어주면 됩니다.

const [value, setvalue] = useState("")

const onChange = useCallback((e) => {
    setvalue(e.target.value);
  }, []);
 
  return (
  	<form>
    	<input
        	type="text"
            name="userId"
            value={value}
            onChange={onChange}              
 		/>
	</form>
  );