32일차

32일차도 많은 것들이 진행됐다. 초기 셋팅을 진행했고, 우리 팀이 담당하는 클래스룸에서 어느 영역을 만들어야 될 지 80% 정도 진행이 됐다. 그에 맞춰서 DB도 어느 정도 진전이 있었다.

그래서 그 중에서 내가 담당한 영역을 기록하고자 한다.

모달(Modal) 만들기

우선 Modal이란, 쉽게 말하면 팝업창이다. 처음에는 모달모달 이런 얘기가 나와서 몰랐는데 찾아보니

이런 식으로 뜨는 걸 Modal이라 부른다. 그래서 나는 댓글 모달을 만들기로 했다. 댓글 모달은 총 2가지가 있다.

첫 번째는 댓글을 등록하는 모달이다. 댓글 달기 버튼을 누르면 댓글을 달 수 있는 모달이 나온다. 댓글을 달고 등록을 누르면 화면에 댓글이 달린다.

두 번째는 답글 모달이다. 답글 모달은 댓글에 답글을 달 수 있는 모달이다. 댓글을 클릭하면 댓글에 관련한 모달이 나오고, 거기에는 이전에 달린 답글을 확인할 수 있고, 답글을 쓸 수 있다.

그래서 이번에는 모달에 관한 코드만 써보려 한다.

코드

Modal. js

import React from "react";

const Modal = ({ isOpen, handleClose, children }) => {
  return isOpen ? (
    <div className="fixed z-10 inset-0 overflow-y-auto">
      <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div
          className="fixed inset-0 transition-opacity"
          aria-hidden="true"
          onClick={handleClose}
        >
          <div className="absolute inset-0 bg-gray-500 opacity-75"></div>
        </div>
        <div
          className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
          role="dialog"
          aria-modal="true"
          aria-labelledby="modal-headline"
        >
          <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
            <div className="flex justify-between items-center pb-3">
              <h2 className="text-2xl font-bold">댓글 달기</h2>
              <button className="text-black close-modal" onClick={handleClose}>&times;</button>
            </div>
            {children}
          </div>
        </div>
      </div>
    </div>
  ) : null;
};

export default Modal;

우선 코드가 굉장히 지저분해 보인다. 그 이유는 TailwindCSS를 사용했기 때문이다. 그래도 하나하나 보면 다음과 같다.

우선 Modal은 isOpen, handleClose, children 이런 게 3가지의 매개변수를 갖는다. isOpen은 보이는지 보이지 않는지에 대한 상태를 관리하는 함수다. handleClose는 모달을 닫는 기능이다. 마지막으로 children은 안의 Modal안의 컴포넌트다.

이렇게 만든 모달은

결과

이렇게 구현할 수 있다. 이제 댓글을 달면 화면에 댓글이 보이면 된다.

정리하기

이번에는 Modal에 대해 공부하고 만들어도 봤다. 이제 프로젝트의 첫 발을 내디뎠으니 잘 정리하고 이해하면서 나아가고 싶다.

이번에 TailwindCSS와 함께 하면서 중요하게 생각한것은 컴포넌트화를 잘해야 한다는 점이다. 코드가 많이 복잡해지기 때문에 꼭 하나하나 컴포넌트화를 잘해서 깔끔한 코드를 작성해가려 한다.

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
#프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프