7회차 과제 - 조민서

[chominseo0723]

신경써서 구현한 부분

모달창 Modal.jsx

const Modal = ({ message, onClose }) => {
  return (
    <div
      className="fixed inset-0 flex items-center justify-center"
      onClick={onClose}
    >
      <div className="absolute inset-0 bg-gray-400 opacity-30"></div>
      <div
        className="relative bg-white px-8 py-6 rounded-xl shadow-lg"
        onClick={(e) => e.stopPropagation()}
      >
        <p className="text-lg font-medium">{message}</p>
      </div>
    </div>
  );
};

fixed inset-0과 flex를 사용하여 화면 전체를 덮고 중앙에 모달 박스를 정렬하여 bg-gray-400 opacity-30 으로 배경만 반투명하게하고 본문은 투명해지지 않도록 하였습니다 또한 stopPropagation으로 내부 클릭(할일이 추가되었습니다 박스 클릭)시 닫히지 않도록 하였습니다

삭제 버튼

  <button
        onClick={onDelete}
        className="ml-10 px-5 py-2 text-sm font-bold text-white bg-blue-700 rounded hover:bg-red-600"
      >
        삭제
      </button>

### state 선언 관리

클릭 시 onDelete 함수를 실행하는 삭제 버튼을 TodoItem.jsx 에 구현하였습니다

  const [isModalOpen, setModalOpen] = useState(false)

모달창의 열림, 닫힘 상태를 관리하는 isModalOpen 상태변수를 false로 초기화하고 상태 변경 함수 setModalOpen과 함께 선언하였습니다

새롭게 알게 된 내용

stopPropagation() 메서드

-> 위 메서드는 캡쳐 Event 링 및 버블링 단계에서 현재 이벤트가 더 전파되는 것을 방지하는 메서드이며 쉽게 말해 자식 요소의 이벤트가 부모 요소까지 전달되지 않도록 막고싶을 때 사용합니다.

질문

[moonchanju]

Modal 컴포넌트를 따로 제작하셔서 처리해두신게 보기 좋습니다!

[moonchanju]

&& 연산자로 간단하게 조건부렌더링으로 나타낸것이 인상 깊습니다!

[moonchanju]

.filter 을 통해 배열을 변경하지 않고 새로운 배열을 반환하게 만드신것 같으셔서 잘 구현하신것 같습니다!