[파트3~5] React Css 라이브러이 실습 및 코드리팩토링

실습내용

React css 라이브러리 대표 3개를 맛보기로 실습

1.ReactBootstrap

2.AntDesign

3.Material-UI(MUI)

 

실습과정

ReactBootstrap

공식 사이트 : https://react-bootstrap.netlify.app/

React Bootstrap | React Bootstrap

 

AntDesign

공식 사이트 : https://ant.design/

Ant Design - The world's second most popular React UI framework

- Reactbootstrap 에 비해 커밋과 스타수가 월등히 많음

- 자주 사용하는 컴포넌트(DatePicker,Upload,Modal)

 

Material-UI(MUI)

공식 사이트 : https://mui.com/material-ui/

Material UI: React components that implement Material Design

- 자주 사용하는 컴포넌트(Drawer,Tabs)

 

* 실습 프로젝트에 각 css라이브러 설치하여 컴포넌트 사용

* 각 css 라이브러리 설치과정 공식문서 참고

* 각 css 라이브러리 컴포넌트 사용법 공식 문서 참고

추가내용

React 패턴

다양한 리액트 패턴 활용하여 진행

* React 대표 패턴

Compound Pattern

 

디자인 트렌드 알아보기

클레이 모피즘

- 매우 둥글고 3차원적인 디자인

- https://hype4.academy/tools/claymorphism-generator

 

글레스 모피즘

- 흐린 배경, 수채색, 반투명 유리 디자인

- https://hype4.academy/tools/glassmorphism-generator

 

3D design

- 웹페이지에 3D 디자인

- Three.js 자바스크립트 라이브러리 이용하여 웹 표준인 WebGL 기반으로, 웹브라우저에 쉽게 구현할 수 있다.

- https://threejs.org/

Three.js – JavaScript 3D Library

 

WebGL 기초

https://webglfundamentals.org/webgl/lessons/ko/webgl-fundamentals.html

WebGL 기초

 

**실습 코드 리팩토링**

각 페이지 컴포넌트(EventByAntd.js,EventByBootstrap.js,EventByMui.js)

에 중복 되는 코드 리랙토링

 

더미데이터 및 필터 옵션 리스트중복 제거

실습을 위한 더미 데이터 와 필터 옵션 리스트가 중복되어 아래 경로에

src -> utils - > dummydata.js 만들어 App.js에서 꺼내 쓸수 있도록 함(dummayproductList,filterOptions)

 

App.js 에서 useContext 로 더미 및 필터 데이터 전역으로 공급

 

EventByAntd.js,EventByBootstrap.js,EventByMui.js 각컴퍼넌트 코드 동일

1. useEffect 사용하여 필터 데이터 및 더미데이터가 변하는 업데이트 시점에 진행

2. 즉 클릭 되는 시점에 전역으로 공급한 dummayproductList 필터함

3. 클릭한 필터데이터 상태값과 비교 하여 필터된 데이터를 setData를 이용하여 상태데이터(data)에 업데이트 한다.

 

4. 리스트 표출 컴포넌트 (AntdProductList.js ,ProductList.js, MuiProductList.js)에 prop으로 상태 데이터(data)를 넣어준다.

 

 

5. AntdProductList.js ,ProductList.js, MuiProductList.js 컴포넌트는 prop으로 받아온 데이터를 map을 이용해 순회하며 뿌려준다.

필터 버튼 중복제거

App.js 에서 전역으로 공급한 filterOptions 배열 데이터를 각 컴포넌트에서 가져와 map으로 순회하여 버튼을 만들었다.

 

페이지 라우팅

react-router-dom 라이브러리를 이용하여 각 컴포넌트를 라우팅 할 수 있게 해주었다.

 

Github 코드

https://github.com/josungman/Programmer-s_Web_App_Dev_Course/tree/main/week10/part3~5/bootstrap-event

Programmer-s_Web_App_Dev_Course/week10/part3~5/bootstrap-event at main · josungman/Programmer-s_Web_App_Dev_Course

 

배포 URL

https://sungman-react-css-library-practice.web.app/

React App

느낀점

리팩토링을 진행하면서 자연스럽게 전 강의에 대한 복습이 이루어졌다.

* useState,useEffect,useContext

* react-router-dom

* 코드 중복 제거

* 스타링링은 맛보기로 진행하였으며 기능위주의 실습