리액트 - 모달 만들기

리액트 모달은 state를 이용하여 모달 페이지를 만든다.

state가 true 일 땐 객체를 반환하여 눈에 보이고, false일 땐 반환하지 않아 화면에 띄워지지 않는다.

리액트에서 state는 정말 만능 같다.

 

오늘 만들 모달은

1. jsx 내부에 만들어 반환하기

2. 컴포넌트화 한 모달을 만들어 반환하기

두가지 버전으로 진행된다!

 

모달 만들기 

1. 모달을 만들기 위해 먼저 상단에 state를 선언하고 state를 생성한다.

import { useState } from 'react';

const [modal, setModal] = useState(false);

 

2.버튼을 통해 모달의 setModal state를 true로 변경하여 객체를 반환해준다.

const openModal() => {
	setModal(true)
}

<button onClick = {openModal}> 카테고리 관리 </button>

 

3. jsx 파일이 return 될 때 원하는 모달을 넣어 준다.

{
	modal && 
    <article className = "modalContainer"> </article>
}

추가적인 설명을 해보자면 사실 위의 코드는

{
  modal == true && 
  // 모달 html
  <article className="modalContainer">
  	// 원하는 html 코드를 작성하거나 본질적으로는 jsx 파일이니 입맛에 맞춰 만들면 된다~
  </article>
}

이렇게도 볼 수 있다. 

state로 선언된 modal 이라는 변수가 false가 기본 값이지만, 버튼을 이용하여 true가 될 때 함께 객체를 반환하는 것이다.

이는 modal state가 boolean 타입이라서 생략이 가능한 것이다.

 

4. 모달 닫기

{
  modal == true && 
  // 모달 html
  <article className="modalContainer">
  	<button 
    	type="button"
        onClick{() => setModal(false)}
    > 
    	닫기
    </button>
  </article>
}

닫는 버튼까지 모달 내부에 추가해주면 완성~

 

5. 전체 코드

import React, { useState } from 'react';

const Element = () => {
  const [modal, setModal] = useState(false);
  
  const openModal = () => {
    setModal(true);
  };

  return (
    <div>
      <button 
        type="button"
        onClick={openModal}
      >
        Open Modal
      </button>
      
      {modal && 
        <article className="modalContainer">
          <button 
            type="button"
            onClick={() => setModal(false)} // 수정: 중괄호 사용
          > 
            닫기
          </button>
        </article>
      }
    </div>
  );
};

export default Element;

 

모달 만들기.. 참 쉽죠?

 

 

여기서 완성하기에 아쉬운 부분을 추가 해 보자!

 

응용 1.  모달을 jsx 파일 내에 함께 그리는 것이 아니라 컴포넌트화 하여 호출하고 싶을 때

3번의 코드를 약간만 응용해주면 된다.

import Modal from './components/Modal'

{
	modal && 
    <Modal /> // 컴포넌트 modal
}

 

응용 2. 모달을 한개의 버튼으로 컨트롤 하고 싶을 때

const [modal, setModal] = useState(false)

const openModal() => {
	setModal(!modal)
}

<button onClick = {openModal}> 카테고리 관리 </button>

setModal의 true 상태를 !modal로 반환해주면 modal이 true 일 땐 false로 false일 땐 true로 알아서 변경해준다.