실습내용
React css 라이브러리 대표 3개를 맛보기로 실습
1.ReactBootstrap
2.AntDesign
3.Material-UI(MUI)
실습과정
ReactBootstrap
공식 사이트 : https://react-bootstrap.netlify.app/
AntDesign
공식 사이트 : https://ant.design/
- Reactbootstrap 에 비해 커밋과 스타수가 월등히 많음
- 자주 사용하는 컴포넌트(DatePicker,Upload,Modal)
Material-UI(MUI)
공식 사이트 : https://mui.com/material-ui/
- 자주 사용하는 컴포넌트(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 기반으로, 웹브라우저에 쉽게 구현할 수 있다.
WebGL 기초
https://webglfundamentals.org/webgl/lessons/ko/webgl-fundamentals.html
**실습 코드 리팩토링**
각 페이지 컴포넌트(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 코드
배포 URL
https://sungman-react-css-library-practice.web.app/
느낀점
리팩토링을 진행하면서 자연스럽게 전 강의에 대한 복습이 이루어졌다.
* useState,useEffect,useContext
* react-router-dom
* 코드 중복 제거
* 스타링링은 맛보기로 진행하였으며 기능위주의 실습
'클라우딩 어플리케이션 엔지니어링 TIL > 10주차' 카테고리의 다른 글
[파트7] React 비디오 에디터 만들기 CORS 에러 정리 (0) | 2024.06.21 |
---|