[React] Modal 컴포넌트 생성 및 활용

 

개인 공부 후 자료를 남겨놓기 위한 목적이므로,
생략되거나 오류가 있을 수 있음을 알립니다.
설명에 대한 지적은 언제나 환영입니다. :)

 

---

 

 

 

리액트와 타입스크립트를 사용한 프로젝트를 진행하면서,

 

모달을 어떤 식으로 만들고, 사용했는지에 대한 서술입니다.

 

 

 

---

1. Modal.ts

우리가 모달로서 계속해서 불러와 사용할 컴포넌트입니다.

 

모달은 기본적으로 props를 통해 내려받은 것을 바탕으로 활용되며, 우리는 타입스크립트를 사용중이므로,

 

컴포넌트의 코드의 맨 앞에 props로 내려받을 인자들의 타입을 지정해주어야 합니다. 

 

이번 포스팅에서는 모달을 사용하는데 있어 가장 기본적인 4가지의 타입을 지정해줍니다.

 

그 외에 다른 사용처의 함수나 변수가 있다면 추가적으로 타입을 지정해주면 됩니다.

 

 

 

props로 내려받을 것

 

open : 모달이 열려있는지 유무

close : 모달을 닫기 위한 함수

header : 모달의 header

children : 모달안의 내용 을 props로 내려받을 것이므로 다음과 같이 type을 지정해줍니다.

 

 

 

이제 타입을 지정한 Modal 컴포넌트의 상세 코드를 봐보도록 합시다.

 

다음 코드는 기본적으로 section과 header, main등 시멘틱 코드를 활용하고, 이를 이용해 이미 css를 끝내둔 상태이므로 

 

다음과 같이 작성되었으며, 자유로운 형식이나 css에 맞추어 얼마든지 커스텀이 가능합니다.

 

 

우리가 사용한 Modal 컴포넌트

 

다음의 코드는 Modal이 사용된 컴포넌트 입니다.

 

Modal을 켜고 끄기 위해서 openModal, closeModal이 사용되었고,  이 함수들은 모두 Modal에 상속되었다는 것을 캐치하시면  Modal을 이해하는데 큰 도움이 될 것이라 생각합니다.

 

 

 

 

 

 

2. Modal의 사용처

 

모달은 기본적으로 UI/UX를 증진시키기 위해 사용됩니다.

 

추가적인 정보를 보여줄 때도 주로 사용하지만 alert와 같은 경고창으로도 사용이 가능합니다.

 

JS의 alert의 경우, 브라우저마다 나타나는 형식이 다르며 이는 커스텀이 불가능하기 때문에

 

Modal을 사용하여, 우리가 원하는 형태(css)의 모달을 띄워 경고창으로 사용하고 활용할 수 있습니다.