해당 프로젝트에는 모달창이 자주 사용되는데, Bootstrap에서 제공하는 modal을 사용해도 되지만 이전에 해당 방법으로 modal을 구현했기에 이번에는 직접 만들어보기로 했다.
Modal 컴포넌트
일단 필수적으로 필요한 div는 modal 이외의 배경을 블랙처리해줄 최상위 div(modal-back)와 바로 아래의 modal이 될 div(modal)를 만들어줘야 한다. 그 안의 내용은 선택사항으로 넣어준다.
-
className='modal-back'최상위 div의 경우에는 style을 사용하여 modal을 나타나게 하는 버튼을 클릭하지 않았다면(false)
display:none을 해준다. modal을 나타나게 하는 버튼을 클릭했다면(true)display: true를 해서 modal을 화면에 보이게 한다.또한, 스타일로 배경색 등을 지정해준다.
position은 fixed로 하여 화면을 스크롤해도 modal이 해당 위치에서 고정되어 스크롤한 화면과 같이 이동하도록 한다.
background-color는 rgba로 하여 3번째 값까지는 0을 넣어주고 마지막 값에는 원하는 투명도를 넣어준다. 만약 해당 값을 0을 넣는다면 배경색은 검정색이 된다.
z-index는 999로 설정하여 modal의 위치가 최상위에 위치하도록 한다. (다른 내용들 위에 위치)
width와 height는 100%로 설정하여 블러처리 배경색(검정색)이 화면을 모두 채울 수 있도록 한다. -
className='modal'나의 경우에는 닫기(x)버튼, 내용이 들어갈 div, 확인버튼(내용)으로 구성했다.
-
className='modal-close'닫기 버튼을 클릭하면 modal 창이 닫힌다. 부모로부터 닫힌 상태(true/false)를 넘겨 받아 닫힘 버튼을 동작할 수 있도록 한다.
-
className='modal-body'내용이 들어갈 div의 경우에는 logo, title, content로 나눠줬다.
logo의 경우에는 프로젝트 modal 디자인의 이미지를 넣어준 것이다.
title과 content의 경우 부모로부터 props로 내용을 넘겨 받아 뿌려준다.
title과 content는 어느 페이지에서 modal을 사용하냐에 따라 값이 달라지기에 props로 하여 부모에서 Modal 컴포넌트를 사용할때 원하는 값을 넣을 수 있도록 했다.
이로 인해, Modal 컴포넌트의 재사용성이 높아졌다. (만약, 이러한 방식으로 하지 않았다면 modal을 사용하는 페이지마다 modal 코드를 계속 적어 넣어야 했을 것이다..) -
className='modal-footer'해당 부분에는 버튼들이 들어가는데 버튼의 종류는 두가지이다.
예/아니오 버튼 한쌍과 확인 버튼이다. 내용에 따라 어떤 버튼을 사용하는지가 달라지는데 버튼을 정의해두지 않으면 매번 modal 코드를 가져와서 붙여넣고 변경해줘야 하기 때문에.. 어떻게 하면 건들지 않을 수 있을까 고민하다가 해당 방법을 생각해냈다.일단 예/아니오 버튼을 묶은 div와 확인 버튼에 style로 삼항연산자를 넣어주는 것이다. 해당 방법은 닫기 버튼에서 사용한 것과 동일하다. 다만,
ynBtn의 값이 true냐 false냐에 따라서 어떤 버튼이 활성화될지 달라진다.ynBtn이 true라면 예/아니오 버튼이 활성화(즉,display: block;)되면서 확인 버튼은 비활성화 (display:none;)된다. false라면 확인 버튼이 활성화되고 예/아니오 버튼은 비활성화된다.true값을 넣을지 false값을 넣을 지는 부모에서 Modal 컴포넌트를 사용할 때 설정해준다.
해당방법을 통해서 Modal 컴포넌트의 재사용성이 높아졌다.
-
부모 컴포넌트(Modal 컴포넌트를 사용할 곳)
Modal 컴포넌트를 열고 닫을 수 있도록 useState로 상태를 관리한다.
Modal 컴포넌트의 속성들은 다음과 같다.
isOpen: modal을 열게 한다.
closeModal: modal을 닫게 한다.
ynBtn: 예/아니오 버튼을 사용할지 확인버튼을 사용할지 결정한다.
title: title로 넣을 내용을 작성한다. (content와 스타일이 다르다.)
content: content로 넣을 내용을 작성한다.
구현 화면
modal이 잘 구현된 것을 확인할 수 있다!
마치며
불과 작년까지만 해도 modal 만들다가 실패해서 bootstrap의 modal을 사용했었는데, 이제는 혼자서도 modal을 구현할 수 있을 정도로 성장한게 보여서 뿌듯했다!
또한 modal을 완전히 컴포넌트화 시키기 위해서 정말 고민을 많이 했었다. title과 content, 버튼이 매 페이지마다 다른데 이걸 어떻게 Modal 컴포넌트를 건드리지 않고 사용할 수 있을까 고민을 많이 했다.
그러다가 props를 떠올렸고, 해당 방법은 매우 성공적이었다.
이전에 공부하면서 props 개념을 이해하려 할때 솔직히 완벽히 이해하지 못했다. 어영부영 이해한 느낌? 하지만 이번에 직접 떠올리고 사용해보면서 완전히 props 개념을 이해하고 활용할 수 있게 되었다.
프로젝트를 진행하면서 점점 성장해나가고 있는 나를 볼 수 있어서 뿌듯했다. 앞으로 더 성장해나가자!!
Comments