TIL #18 1차프로젝트 회고(part.3 모달)

 

 

이번 프로젝트에서 내가 자원해서 상품 리스트와 상품 상세페이지를 맡은 이유는 리액트를 배우는 입장에서

컴포넌트의 단위를 어떻게 잡아야 하고,

각 컴포넌트의 state와 props를 어떻게 활용해야 할지

에 대해 많은 공부가 될 것 같아서였다.

 

결과적으로는 도움이 되었다.

어떻게 사용해야 하는지 알게 되었다기보다는......

어떻게 해야 스스로를 힘들게 하는지 알게 되는 시간이었다......😭

---

처음 팀 프로젝트를 해보는 것이고, 눈에 보이는 결과물을 만들어 낸다는 사실에 흥분해서 아무 생각없이

단순히 레이아웃 측면에서 컴포넌트를 나눴다.

 

나름 직접 만든 mockdata와 grid를 활용하여 신나게 레이아웃을 맞췄다.

'내가 쪼개지나 컴포넌트가 쪼개지나 '라는 마음으로 프로젝트 1주 차가 지나갈 때만 해도 큰 문제를 느끼지 못하고 계속 컴포넌트를 나눴다.

 

🌋 문제는 모달 창을 만들기 시작할 때 본격적으로 나타났다. 

 

단순히 머리로 생각을 하면,

 

1. 상품에 hover시 나타나는 장바구니 아이콘 클릭 시, 클릭한 상품에 대한 정보가 담겨있고, 수량을 조절할 수 있는 모달 창이 나온다.
2. 모달 창의 취소하기 버튼을 클릭하면 상품 리스트 페이지로 돌아간다.
3. 담기를 클릭하면, 장바구니 페이지로 이동 or 상품 리스트페이지로 돌아가기 버튼이 있는 모달 창을 생성한다.

이렇게 정리가 되는 흐름이었다.

 

모달창을 만드는 것 자체는 이미 많은 사람들이 구현했기 때문에 큰 문제가 아니었다.

문제는 컴포넌트 간 데이터의 흐름이었다.

---

🌊첫 번째 흐름은 react-icons 라이브러리를 활용한 아이콘에 '어떻게 상품의 정보를 담아 보낼 것인가 ' 하는 것이었다.

 

상품 리스트의 최상단 컴포넌트에 모달 창에 전달해줄 상품의 아이디값과 함수들을 따로 state로 선언하고,

아이콘 컴포넌트에는 따로 id 속성을 선언하여 map 메서드를 통해 각 상품 컴포넌트에 할당된 id값을 할당하였다.

 

그리고 아이콘의 onClick 이벤트 콜백 함수를 통해 최상단 컴포넌트에 모달창에 전달해줄 정보가 변경되도록 하였다.

 

데이터의 흐름을 요약하자면  

 

1. 최상단 컴포넌트에 모달 창에 전달해줄 상품의 id값 (modalId) 선언
2. 아이콘 클릭 시 modalId의 값이 변경
3. 모달창 나오며 해당 id값에 맞는 상품의 정보를 보여준다. 

이렇게 되었다.

---

🌊두 번째 흐름은 모달 창에서 전달받은 상품의 정보와 수량을 장바구니로 전달해 주는 것이었다.

 

장바구니 아이콘 클릭 시 모달 창에서 상품의 수량을 선택할 수 있고,

해당 수량만큼 장바구니에 추가가 되도록 구현해야 했기에 모달창에서 변경되는 정보들도 상품 리스트의 최상단 컴포넌트에 선언되어야 했다.

 

모달창에서 수량이 변경되면 onChange 이벤트의 콜백 함수를 통해 최상단 컴포넌트에 선언된 modalCount의 값이 변경되도록 설정하였다.

 

그 후에 담기를 누르면 fetch API를 통해 POST방식으로 상품의 수량을 서버로 전달하는 동시에 쿼리 스트링으로 상품의 id값을 전달하였다.

 

요약하자면 

 

1. 모달 창에서 상품의 수량이 변경되면 최상단 컴포넌트의 modalCount값이 변경
2. '담기' 버튼 클릭 시 fetch 함수를 통해 백앤드에서 전달받은 API 주소로 POST 방식으로 modalCount의 값 전달
3. 전달 시 동시에 템플릿 리터럴을 활용하여 위의 흐름에서 선언된 modalId값 쿼리 스트링으로 전달    

이렇게 말할 수 있을 것 같다

---

상세페이지처럼 동적 라우팅을 사용하는 것도 아니고, 어떻게 해서든 상품의 id값을 전달해 주어야 하는데,

컴포넌트를 단순히 레이아웃에 맞추어 나눠놓다 보니,

데이터의 흐름이 한눈에 보이지도 않고,

오류가 나오면 어디서 무엇이 잘못된 것인지 찾기도 힘들었다.

(클래스명 짓기 힘든 건 보너스....🏴‍☠️)

 

추가적으로 정말 아쉬웠던 점은 상품의 상세 페이지에서 상품의 수량을 조절하는 레이아웃과

모달 창에서 상품의 수량을 조절하는 레이아웃이 크기만 빼고 기능까지도 동일했는데,

설계단계에서의 실수로 인해 똑같은 코드를 반복해서 사용해야 하는 일이 일어났다. 😱

 

프로젝트 기간이 워낙 짧았던지라 미처 수정을 하진 못했지만,

이 부분은 꼭 다시 리펙토링을 하려고 한다.🙌

 

2차 프로젝트 때는 적어도 동일한 실수는 하지 않도록 화이팅!!

---