Practice) React Shop - Day 3

3일차에는 메인 페이지를 마무리 하고 각 카테고리 페이지를 만들었다. 

제일 먼저 캐러셀을 다듬었다. 

내가 만든 캐러셀의 3번째 식료품점 이미지는 샘플 페이지 이미지와 위치가 달라 글자가 잘 보이지 않았다. 

그래서 이미지의 위치를 조정해서 문제를 해결했다. 

물론, 문제를 어떻게 해결할지 방법을 찾는데 시간이 많이 걸렸다. 후...

 

 

다음으로 메인에 들어갈 상품 frame을 만들었다. 

메인에 들어가는 상품 frame이 카테고리별 상품 frame과 동일한 구조를 사용하고 있어 하나의 컴포넌트를 만들어 재사용하였다. 

다만, 메인의 상품 frame은 4개의 상품만 보여주므로 렌더링할 frame 수를 props로 받을 수 있게 처리했다. 

그럼 숫자를 props로 받는 경우에는 데이터를 받아와 해당 숫자만큼의 frame을 만들고 그렇지 않는 경우에는 전부 다 렌더링 하도록 했다. 

 

다음으로 상품 상세페이지를 만들었다. 

이미 만들어 놓은 product frame 컴포넌트를 사용했다. 

카테고리 페이지는 동일한 frame을 사용하므로  카테고리별로 각각의 페이지를 만들기 보다는 선택된 카테고리를 받아 CategoryPage 컴포넌트에 동적으로 렌더링되게 했다. 

어떻게 해야할까 고민하던 중, header에 있는 nav의 버튼이 눌렸을 때, 해당 버튼의 innerText 를 받아 카테고리 페이지에 넘겨줘야할 것 같았다. 

useState를 사용해 상태관리를 했고 header에서 상태를 받아 카테고리 페이지에 넘겨주도록 하여 문제를 해결했다. 

 

아, 추가적으로 실제로 category는 4개였다. 

의류는 남성복과 여성복으로 나뉘어 있어서 특정 category명으로 렌더링 하기가 애매했다.

그래서 받아온 데이터의 카테고리가 특정 단어를 포함하는지로 filtering한 후 데이터를 렌더링 했다. 

문득 든 생각인데, 어차피 카테고리가 3개밖에 없으니 나머지 두 카테고리가 아닌 것만 렌더링 해도 될 것 같다. 

물론 이후 데이터에 다른 카테고리가 추가된다면 문제가 되겠지만, 정적인 데이터라면 과제에서는 사용해도 될 것 같다. 

 

이제 남은건 캐러셀 버튼에 페이지 연결, 상품 상세페이지, dark/light mode, search bar, cart 정도 인것 같다. 

4일차에도 으쌰으쌰 합시당!!