이번에 프로젝트를 진행하며 상품리스트, 장바구니, 구독 및 배송주기 관리, 핵심성분 페이지를 제작하였다. 급한 마음에 어떻게든 기능 구현을 하기위해 안간힘을 썼지만 부족한 부분이 많아 페이지 하나씩 좋았던 점과 아쉬웠던 점을 남겨 볼까 한다.

상품리스트 페이지

(둘러보기를 클릭하면 스크롤이 내려가는 애니메이션도 있지만, gif변환시 잔상이 너무 심해서 제거하였습니다.)

컴포넌트

상품리스트페이지는 위와 같이 크게 헤더, 배너, 타이틀, 그다음 상품순으로 나눌 수 있다고 생각하여 각각을 컴포넌트화 하였다.

API GET

먼저, 상품리스트 페이지에 들어가게 되면 카테고리 API를 GET요청을 하고, 이 데이터를 categories라는 state에 배열형식으로 담아 배열 메서드인 map을 사용하여 4개의 Product 컴포넌트를 만들어 주었다.
그리고, 각각의 인덱스를 props로 전달해주었다,

데이터 형식은 위와 같이 크게 카테고리로 나누어지고, 각각의 카테고리에 맞는 상품들이 배열로 담겨 있다.

데이터 활용

그래서 이렇게 받은 데이터를 기반으로 용량, 카테고리 이름, 가격 등을 작성해 주었다. 여기서 기억에 남았던 것은 제품의 가격으로 "7600.00"이라는 값을 받았는데,

{Math.floor(category.price).toLocaleString()}원

소수점을 버리고, toLocaleString()매서드를 사용하여 아래와 같이 원하는 결과물을 얻을 수 있었다.

또한, 카테고리 단위로 Map을 사용한 동시에 Product의 배열을 가지고 또 Map을 사용해서 하드코딩을 줄일 수 있었다.

데이터가 배열안에 키워드로만 주어진다면

여기서 겪었던 문제점은 당초에 백엔드와 협의해서 제작했던 데이터는 아래와 같은데,
갑자기 데이터 형식이 바뀌어
이렇게 배열안에 키워드만 담아서 준다는 것이었다. 그래서 어떻게 해결할 수 있을지 고민을 하다가 TAG_DETAILS라는 객체를 하나 선언하고, 그 객체의 Key값을 tags안에 내용으로 지정하여

{TAG_DETAILS[list.tags]}

위와 같이 Bracket Notation을 통해 접근을 하려고 했다. 하지만 배열안에 값이 한개인 경우는 괜찮았지만, 두개인 경우에는 이 방식을 사용할 수 없었고, 고민 끝에 배열의 매서드인 join()을 사용하여 해결할 수 있었다.

{TAG_DETAILS[list.tags.join()]}

제품 상세페이지로 연결

<Link to={`/productdetails/${list.id}`}>
                    <button>자세히</button>
                  </Link>

제품 상세페이지 연결은 어렵지 않았다. 자세히 버튼 클릭시 list.id를 디테일 페이지 뒤에다가 붙어서 보내주었고, 상세페이지에서는 useParams()를 활용해 변수화하여 각각의 id에 맞는 API를 요청할 수 있었다.

아쉬운점

최대한 짧은 시간내에 페이지를 실제와 같이 구현하기 위해 제품의 디테일을 클릭하면 색깔이 바뀌도록 아래와 같이 구현했지만

props 로 받는 정보를 imgUrl 이라는 state 를 만들어 관리하는 것은 동일한 정보를 가지는 state 가 2개가 생길테고(categories / imgUrl) 이렇게 되면 2가지 state의 싱크를 맞춰주는 추가적인 액션이 요구될 것인데, 이럴 바에는 하나의 state에서 관리하는게 더 좋아보인다는 지적을 받았다.

<div
  key={list.id}
  className="categoryType"
  onClick={() => {
  setImgUrl(list.thumb);
  }}
 >

바로 이 부분인데, 나는 처음에는 이미지를 랜더링하기위해 img url을 따로 state관리하는것이 맞다고 생각했는데, 말 그대로 동일한 정보를 가지는 state를 굳이 2개를 쓸 필요가 없어 보인다. 이번주에 리팩토링을 진행한다면 img url이 바뀌는 handleImg라는 함수를 부모 컴포넌트에서 작성 후 이 함수를 props로 넘겨 자식에서 사용하는 방식으로 수정해 보아야겠다.