[전공자들 6] 개발 5일차 - modal 하나로 가성비를 챙겨보자

글 쓰기 버튼을 누르자마자 글이 써지는 페이지는 거의 없다. 

마찬가지로 그 중요성과 영향력이 큰 활동일수록, 모달을 통해 재확인하는 작업을 필연적으로 거치게 된다.

 

화면설계

 

앞선 프로젝트에서는 리액트를 처음해봐서 일단 적응하는게 우선이었다. 

그래서 여러페이지에서 필요한 모달을 한 번만 구현할 수 있지 않을까 생각은 했었는데 실력 부족으로 실패했다..

(일일이 모든 페이지의 모달을 다 만들었음..)

 

하지만 이번엔 다름!

효율성은 아직 알 수 없지만 별다른 gpt의 도움 없이 스스로 해냈다는 것에 뿌듯! 

일단 내가 필요한 모달의 종류는 글쓰기/회원탈퇴/각종 활동 삭제기능 해서 일단 7개정도이다.

 

먼저, 모달의 내용을 제외한 나머지 틀을 만들어 주고 

props를 사용해 모달을 불러주는 곳에서 type이라는 변수에 어떤 종류의 모달을 요청하는지 담았다. 

+ 취소버튼을 눌렀을 때 모달을 끄기 위한 setOnModal함수까지

그리고 useState를 사용해 type에 따라 객체 형식으로 모달의 내용을 설정해준다. 

 

 

보내주는 곳에서 객체형식으로 보내고, 받아서 바로 사용하는 방법도 생각해봤는데, 나중에 일일이 찾아다니면서 수정하기가 더 번거로울 것 같아서(몇개 없기도 하고,,) 그냥 useEffect를 통해 컴포넌트 호출 시 초기에 설정해주는 방식을 사용했다. 

 

 

특히 내 모달은 마이페이지에서 집중적으로 필요했는데, 

 

각각의 활동에 대해 삭제를 할 때마다 각각 다른 모달이 떠야했다. 

그런데 여기서, 활동메뉴 5개를 클릭할 때마다 css를 바꿔주기 위해 이미 작성했던 코드가 있었다

 

이런식으로, selectMenu변수에 현재 활성화된 메뉴를 저장하고 있어서 모달을 호출할 때도 그냥 이 변수를 type이름으로 그대로 보내줄 수 있었다. 

 

 

결과물!!

좋아요한 글 목록에사 삭제를 눌렀을 때 -> 좋아요 취소 모달

내가쓴글 목록에서 삭제를 눌렀을 때 -> 글 삭제모달

회원탈퇴버튼을 눌렀을 때 -> 회원탈퇴 모달

 

 

아직 백엔드 작업을 하기 전이라 데이터가 거의 하드코딩으로 되어있기도 하고, 몇몇 부분은 수정해야할 곳도 많다...