React project 01. 집꾸미기 클론 프로젝트

강지원·2021년 11월 7일

진행 중인 1차 프로젝트🧨

어떤 주제로 프로젝트를 진행할 것인가 라는 질문을 받고서
내가 내린 결정은 "지금까지 배운 것을 정확히 구현해낼 수 있는가"였다.
그래서 찾은 웹페이지는 "집꾸미기"였다.

타 웹페이지에 비해 단순해보이는 UI와 대부분의 커머스 웹페이지에 존재하는
로그인/회원가입 기능, 상품 페이지, 메인을 보고선
이 정도는 금방 완료할 수 있겠다는 판단이 들었다.
그리고 나의 판단이 틀렸다는 것을 알아차리기까지는
그리 오랜 시간이 걸리지 않았다.

진행 기간 : 2021.11.01 - 2021.11.08(현재 진행 중)
프로젝트 인원 : Front-end : 4명, Back-end : 2명

기술 스택📍

FrontEnd : HTML / CSS / JavaScript (ES6) / React / sass

협업도구 : Slack / Git + GitHub / Trello를 이용

구현 사항(Front-end)📝

메인 페이지, 스토어 페이지, 상품 상세 페이지, 로그인, 회원가입 페이지

본인구현사항

Store 페이지

Store 레이아웃 구현
필터링 모달창 토글 기능
높은 가격, 낮은 가격 ordering 기능
Fetch()를 통한 Mock data 활용

1. Store 페이지 레이아웃

① state에 빈 배열을 지정하고 ComponentDidMount 함수 내부에
fetch함수를 사용해 mock data에 있는 상품 데이터를 가져와
setState에 저장해줬다.

② 상품 정보 데이터를 담은 컴포넌트를 만들어 setState의 값을
props로 전달해 상품 정보를 화면에 렌더링 시켜줬고,
key값으로 데이터의 id를 이용해 데이터를 구별할 수 있도록
지정해줬다.

③ map 메서드를 사용해 가져온 데이터만큼
상품 컴포넌트가 나타나도록 구현했다.

구현 결과

2. 필터링 모달창 토글 기능

① filtering 버튼을 누르면 전체 상품, 낮은 가격순, 높은 가격순
버튼이 있는 모달창이 나오도록 구현했다.

② state에 isModalOn이라는 데이터를 false로 설정하고,
handleClick이라는 함수가 실행되면 setState로
isModalOn을 true로 바꿔주도록 만들어줬다.

③ 만든 함수를 버튼의 onClick 이벤트에 붙여서 사용해줬고,
버튼 태그 내부에 조건을 걸어 true이면 Modal 컴포넌트가 보여지도록,
false라면 Modal 컴포넌트가 사라지도록 구현했다.

3. 필터링 기능

① state에 빈 배열을 지정하고 ComponentDidMount 함수 내부에
fetch함수를 사용해 mock data에 있는 상품 데이터를 가져와
setState에 저장해줬다.

② 상품 데이터를 하나의 state에만 저장하는 것이 아닌,
newProduct라는 state에도 상품 데이터를 저장해줬다
(이유는 뒤에서 설명)

③ filteringBtns라는 함수를 만들고, 함수가 실행되면
if문을 통한 조건이 실행될 수 있도록 구현했다.

여기서 newProduct라는 state를 이용해줬는데
product라는 state만 이용해줄 경우, 내가 작성한 코드는 조건에 맞는 버튼을 클릭하면 setState에 product 데이터가 저장되는 코드이다.

이 말이 무엇이냐.
처음 state에는 모든 상품이 존재한다.
필터링 버튼을 눌러 filteringBtns 함수를 실행하면
조건에 맞는 product 데이터만 보여주고, 현재 state에는
모든 상품이 아닌 조건부 데이터만 남게 된다.

문제는 여기부터 시작된다.
조건부 데이터를 현재 state로 이용할 경우 다음 filteringBtns 함수를
실행시켰을 때 나오는 조건부 데이터는 첫 조건부 데이터를 기준으로
조건이 적용된다는 것이다.

결과적으로, 내가 비교해야 할 state는 초반의 모든 product 데이터인데
매번 조건부 데이터와 비교를 하게되어 원하는 데이터를 얻지 못하게 된다.

그래서 생각해낸 것이 newProduct라는 state에도 데이터를
담아 filtering에 사용하는 state로 만들어 주면,
항상 전체 데이터와 조건부 데이터를 비교할 수 있게 된다는 것이다.

④ filteringBtns함수를 버튼 태그 내에 있는 Modal 컴포넌트에
props로 전달해줬다.
Modal 컴포넌트 안에 위치한 조건 박스에 onClick 이벤트를 달아주고
onClick 이벤트가 실행되면 props로 전달받은 filteringBtns 함수를
실행시켜줬다.