# useModal

pengoose_dev

재사용성이 높은 모달을 간단하게 만들어보자. Portal 생성 포탈을 생성하는 이유는 간단하다. 우선 컴포넌트가 생성된 결과부터 확인하자. root의 하위 컴포넌트에 modal을 제어하는 컴포넌트가 생성되는 것이 아닌, modal-root라는 별개의 컴포넌트에 생성된다. 하나의 컴포넌트에 로직을 작성하게 된다면, 여러 컴포넌트가 복잡하게 얽혀 예상치 못한 z-index issue를 마주할 수 있다. 하지만, 해당 솔루션을 적용하면 오로지 modal-root 내부의 컴포넌트들의 CSS와 root컴포넌트 내부에 z-index가 부여된 컴포넌트들만 고려하면 되기 때문에 예상치 못한 오류를 피할 수 있다. 또한, 기능에 따라 컴포넌트를 분류하였기 때문에 이후 확장성과 재사용성에 이득을 취할 수

seo__namu

모달 컴포넌트를 만들어서 사용하는데, 모달의 렌더링 여부가 결정되는 state를 모달 컴포넌트에게 위임할 수 없을까하는 생각이 들었다. 기존 코드 예시 Modal 컴포넌트는 props로 받은 isOpen이 true일 경우에만 모달을 보여주고, false인 경우 null을 반환해서 아무것도 렌더링 되지 않도록 했다. 이렇게하면 모달을 사용하는 모든 화면 혹은 컴포넌트에서 모달의 상태 값을 가지고 있어야 하는데, 이 부분이 너무 효율적이지 않았다. > 이럴 때는 hook을 만들어서 사용하자! Modal Component 먼저 모달 컴포넌트를 수정했다. 기존에는 props로 isOpen을 받아서 렌더링 여부를 모달 컴포넌트 내부에서 결정했지만, 이 일을 hook에게 위임할 예정이다. class명이 modal인 div는 모달의 외부 배경이다. 배경을 클릭하면 모달이 닫히도록 할 것이기 때문에 onClick 이벤트 발생시