React-Admin Modal 컴포넌트 사용

 

const [modal, setModal] = useState(false)

hook을 이용해서 modal open 상태를 관리했다.

초기값은 false여서 모달이 보이지 않는다.

 

{modal && <PlaceModal open={modal} closeModal={closeModal} />}

PlaceModal이라는 함수형 컴포넌트를 생성해서 props로 open 값과 closeModal 메소드를 넘겨주었다.

 

import {Button, Fade, Select, Input, makeStyles, Modal, InputLabel, MenuItem, FormControl} from '@material-ui/core'
import React, {useState, useEffect} from 'react'

모듈은 이렇게 사용했다.

 

const useStyles = makeStyles((theme) => ({
  modal: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  },
  paper: {
    width: '25%',
    backgroundColor: theme.palette.background.paper,
    border: '2px solid #000',
    boxShadow: theme.shadows[5],
    padding: theme.spacing(2, 4, 3)
  },
  button: {
    margin: 20
  },
  formControl: {
    display: 'block',
    margin: theme.spacing(1),
    '& > *': {
      width: '100%'
    }
  }
}))

style은 material Modal 도큐먼트를 참고했다. '&> *'은 자식 태그들 모두 적용되게끔 한다.

 

  const classes = useStyles()
  const [categoryList, setCategoryList] = useState([])
  const [form, setValues] = useState({
    address: '',
    title: '',
    titleKo: '',
    categoryId: 1
  })

categoryList는 select input의 옵션으로 사용하는 리스트여서 useEffect로 처음에 API호출을 하고 저장을 했다.

form input값들은 useState를 사용해 딕셔너리 형태로 저장했다.

 

  useEffect(() => {
    const getCategory = async () => {
      const result = await dataProvider('GET_LIST', 'categories')
      setCategoryList(result.data)
    }
    getCategory()
  }, [])

 

<FormControl className={classes.formControl} required>
	<InputLabel>주소</InputLabel>
	<Input className={classes.textInput} name="address" type="text" onChange={updateField} />
</FormControl>

FormControl 컴포넌트에 자식 컴포넌트로 라벨과 인풋을 사용했다.

 

  const updateField = (e) => {
    setValues({
      ...form,
      [e.target.name]: e.target.value
    })
  }

input들의 name을 키값으로 사용하고 value값을 딕셔너리의 value로 저장했다.

 

 

    <Modal
      open={open}
      onClose={closeModal}
      aria-labelledby="simple-modal-title"
      aria-describedby="simple-modal-description"
      className={classes.modal}
    >
      <Fade in={open}>
        <div className={classes.paper}>
          <h3 id="transition-modal-title">장소 직접 등록하기</h3>
          <form>
            <FormControl className={classes.formControl} required>
              <InputLabel>주소</InputLabel>
              <Input className={classes.textInput} name="address" type="text" onChange={updateField} />
            </FormControl>
            
            ... 생략

            <Button variant="outlined" color="primary" type="submit" onClick={handleButton}>
              등록하기
            </Button>

등록하기 버튼으로 API에 POST형태로 값을 생성했다.

 

const handleButton = async (e) => {
    e.preventDefault()
    const {data} = await search()
    const {countryId} = data
    const posting = {
      ...form,
      countryId,
    }
    createPlace(posting)
  }      

 

 

---

 

 

참고 : https://material-ui.com/api/modal/

Modal API - Material-UI