React:TodoList - 팝업 구현하기

우측 하단의 빨간색 + 버튼을 눌렀을 때 (2)와 같이 팝업이 나타나고, 다시 배경을 눌렀을 때 (1)로 돌아가도록 만들어볼 거다.

먼저, TodoInsert.js 를 생성해준다.

TodoInster.js

import React from 'react'
import { MdCircle } from 'react-icons/md'
import "./TodoInsert.css"

export default function TodoInsert() {
  return (
    <div>
      <div className='background'></div>
      <form>
        <input></input>
        <button type='submit'>
          <MdCircle />
        </button>
      </form>
    </div>
  )
}

---

App.js

React Hook:useState

 const [insertToggle, setInsertToggle] = useState(false);

그리고 useState를 이용하여 toggle값을 만들어준다.

---

 <Template todoLength={todos.length}>
      <TodoList todos={todos}/>
      <div className='add-todo-button' onClick={onInsertToggle}>
        <MdAddCircle />
      </div>
      {insertToggle && <TodoInsert onInsertToggle={onInsertToggle} /> }
    </Template>

아래와 같이 TodoInsert 컴포넌트는 toggle이 true인 경우에만 나오도록 해준다.

{insertToggle && <TodoInsert /> }

처음엔 초기값 useState(false)이 false이기 때문에 화면에 보이지 않는다.

이제 버튼을 클릭하면 insertToggle이 true로 바뀌어 TodoInsert 컴포넌트를 나오도록 해보장

function onInsertToggle() {
  setInsertToggle(prev => !prev)
}

이전 값의 Boolean 값을 반대로 바꿔주는 함수를 리턴하도록 해주는 함수 생성하고 이 함수를 아래와 같이 넣어준다.

 {insertToggle && <TodoInsert onInsertToggle={onInsertToggle} /> }

이제 + 버튼을 누르면 팝업이 생기고 사라지는 현상을 확인할 수 있따.

배경을 눌렀을 때에도 (1)과 (2)를 왔다갔다할 수 있도록 해주장

import React from 'react'
import { MdCircle } from 'react-icons/md'
import "./TodoInsert.css"

export default function TodoInsert({onInsertToggle}) {
  return (
    <div>
      <div className='background' onClick={onInsertToggle}></div>
      <form>
        <input></input>
        <button type='submit'>
          <MdCircle />
        </button>
      </form>
    </div>
  )
}

{onInsertToggle}을 인자로 받아오고 onClick={onInsertToggle} 버튼 온클릭으로 요 함수 넣어주기하면 완성 ~

---

css를 이리 저리 수정하면

.background {
    position: fixed;
    z-index: 980;
    top: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #868e96;
    opacity: 0.8;
  }
  
  form {
    margin-left: 13%;
    position: fixed;
    top: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 990;
    width: 300px;
    height: 150px;
    border-radius: 5px;
    box-shadow: 1px 2px 5px 1px #868e96;
  
    background: white;
  }
  
  form > input {
    background: none;
    outline: none;
    border: none;
    padding: 0.5rem;
    font-size: 1.125rem;
    line-height: 1.5;
  }
  
  form > button {
    padding-top: 20px;
    background: none;
    outline: none;
    border: none;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: 0.1s background ease-in;
  }

완성 ~