[React] 커스텀 훅을 사용한 DefualtModal 만들기

커스텀 훅을 사용해 defultModal을 제작해보자.

코드 확인하기

커스텀 훅 생성하기

먼저 커스텀 훅'useModal.js'의 코드는 다음과 같다.

import { useState } from "react";

const useModal = () => {
  const [isShowing, setIsShowing] = useState(false);

  function toggle() {
    setIsShowing(!isShowing);
  }

  return {
    isShowing,
    toggle
  };
};

export default useModal;

useModal이 하는 작업은 다음과 같다.

1. useState(isShowing, setIsShowing)를 사용하여 모달의 보이는 상태를 저장
2. isShowing상태 값을 반대로 만들어주는 함수 toggle

DefaultModal 컴퍼넌트 생성하기

import React from "react";
import ReactDOM from "react-dom";

const Modal = ({ isShowing, hide, message }) =>
  isShowing
    ? ReactDOM.createPortal(
        <React.Fragment>
          <div>
            <div>
              <button
                type="button"
                data-dismiss="modal"
                aria-label="Close"
                onClick={hide}
              >
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <p>저는 {message}입니다.</p>
          </div>
        </React.Fragment>,
        document.body
      )
    : null;

export default Modal;

여기서 createPortal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 시킨다.

ReactDOM.createPortal(child, container)

첫 번째 인자(child)는 엘리먼트, 문자열, 혹은 fragment와 같은 어떤 종류이든 렌더링할 수 있는 React 자식이고, 두 번째 인자(container)는 DOM 엘리먼트를 의미한다.

공식문서

즉 외부에 존재하는 DOM 노드를 React App DOM 계층에 존재하는 것 처럼 연결해준다.
지금 같이 Modal과 같은 기능을 구현 할 때 유용하게 활용할 수 있다.

모달 사용하기

마지막으로 useModal()과 Modal 구성 요소를 함께 묶어준다.

import { useState } from "react";

import useModal from "./hooks/useModal";
import Modal from "./modal/DefaultModal";
import "./styles.css";

export default function App() {
  const { isShowing, toggle } = useModal();
  const [message, setMessage] = useState();

  const handleClick = (info) => {
    setMessage(info);
    toggle();
  };

  return (
    <div className="App">
      <button onClick={() => handleClick("곰")}>Brown</button>
      <button onClick={() => handleClick("오리")}>Sally</button>
      <Modal isShowing={isShowing} hide={toggle} message={message} />
    </div>
  );
}

  const { isShowing, toggle } = useModal();

app.js에 커스텀 훅을 가져오고,isShowing, toggle를 초기화 시켜준다.

  const handleClick = (info) => {
    setMessage(info);
    toggle();
  };

onClick 함수에 toggle();함수를 넣어준다.