react로 쇼핑몰 만들기(3) - Category 컴포넌트

이번 포스트에서 위와 같은 부분을 작업합니다.

 

Redux 사용 준비

npm i react-redux

위 명령어를 통해 redux를 설치합니다.

src폴더 안에 store폴더내 각각 slice.js파일을 만듭니다.

그리고 메인페이지인 index.js도 생성합니다.

user.slice.js파일의 코드입니다.

store폴더 안에 index.js의 코드입니다.

루트경로에 main.jsx파일의 변경코드입니다.

左)SignIn.jsx  右)SignUp.jsx

SignIn.jsx와 SignUp.jsx파일의 추가 코드입니다.

 

홈페이지 생성하기

홈페이지는 위와 같은 구조로 이뤄집니다.

HomePage폴더 안에 위와 같이 폴더를 생성 후 각 폴더 내 .jsx와 .module.scss파일을 생성합니다.

 

Category 컴포넌트 생성하기

 

左) store폴더 안에 categories폴더 안에 categories.type.js 파일의 코드입니다.

右) store폴더 안에 categories폴더 안에 categories.slice.js 파일의 코드입니다.

store폴더 안에 index.js파일의 수정코드입니다. 위에 생성한 categoriesSlice를 등록합니다.

左) CategoryTab.jsx파일입니다.

右) FilterCategory.jsx파일입니다.

左1, 2) CategoryTab.module.scss 입니다.

右) FilterCategory.module.scss 입니다.

HomePage폴더 안에 index.jsx의 추가 코드입니다.