4주차 WIL-리액트 전역상태관리
-리액트에서는 데이터가 단방향(상위->하위)으로 흐른다
-컴포넌트가 분리되어 점점 많아지는 상황이라면 Prop Drilling이 문제가 될 수 있다.
- props 전달이 많은 과정을 거치게 되면서 해당 prop을 추적하기 힘들어짐
- 컴포넌트들 간의 state공유가 필요한데 자식 컴포넌트가 부모 컴포넌트에게 state및 정보를 전달하는 것은 어려움
=>전역상태관리 필요
-전역상태관리: 데이터를 부모컴포넌트에서 받아오는 것이 아니라 전역데이터 저장소에서 받아와서 사용한다.
-전역상태관리Redux flow
- Store(전역 데이터 저장공간)생성
- 하위 컴포넌트에서 접근할 수 있도록 Provider로 전역 데이터 내려주기
- 하위데이터에서 전역데이터 수정시 dispatch를 통해 Reducer로 전달할 Action 작성
- 전달된 Action에 따라 전역데이터 갱신을 분기하는 Reducer작성
- 하위 컴포넌트에서 전역데이터 접근 및 갱신 dispatch호출
출처: https://watermelonlike.tistory.com/179 [수박수의 블로그]
**useDispatch: 등록된 Reducer호출
**useSelctor: 초기 state 가져오기
리액트 UI 라이브러리
1. Material-UI: 가장 인기있는 라이브러리!
구글 머테리얼 디자인 기반으로 제작. 타입스크립트, 플로우 타입 모두 지원.
MUI: The React component library you always wanted
MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design. You will develop React applications faster.
mui.com
2.Ant Design: 타입스크립트 기반으로 제작된 라이브러리.
Ant Design - The world's second most popular React UI framework
ant.design
3.Chakra UI: 접근성을 최우선 지원으로 둔 UI라이브러리
Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React a
Simple, Modular and Accessible UI Components for your React Applications. Built with Styled System
chakra-ui.com
4.React Bootstrap: 부트스트랩 기반으로 만든 라이브러리
https://react-bootstrap.github.io/
React-Bootstrap
The most popular front-end framework, rebuilt for React.
react-bootstrap.github.io
5.Reactstrap
Storybook
reactstrap.github.io
6.Semantic-UI-React
https://react.semantic-ui.com/
Introduction - Semantic UI React
Semantic UI React is the official React integration for Semantic UI . Installation instructions are provided in the Usage section. jQuery is a DOM manipulation library. It reads from and writes to the DOM. React uses a virtual DOM (a JavaScript representat
react.semantic-ui.com
7.Blueprint
Blueprint - A React-based UI toolkit for the web
A React-based UI toolkit for the web
blueprintjs.com
8.Rebass
Rebass
“A whopper component library built on styled-components. Responsive, systematic, scalable...the business!”
rebassjs.org
9.Grommet
Grommet
part design system, part framework, and all awesome grommet is a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package
v2.grommet.io
10.React-materialize
https://react-materialize.github.io/
React Materialize
react-materialize.github.io
참고->https://usecode.pw/10-best-react-ui-library/#material-ui
내가 생각하는 같이 일하고 싶은 개발자로 가장 중요한 것은 의사소통이라고 생각한다.
a의 업무를 지시했는데 a와 비슷한 빠른 속도로 a-1의 업무를 하는 사람과 조금 느리더라도 온전히 a의 업무를 하는 사람이 있다면 나는 후자의 사람이고싶다.
내가 하는 업무에 대해 정확히 파악하고 회사에서 나아가고자 하는 방향을 알고 업무를 말끔하게 처리하는 사람이라면 정말 어디서든 환영받을 수 있을 것 같다.
나는 치과에서 8년동안 일을 했다.
오른쪽 사랑니를 뽑아야 하는데 왼쪽에 마취를 했다던지 아스피린을 복용하고 있는 고혈압 환자인데 전달이 제대로 안돼서 임플란트 수술이나 발치등 외과적 진료를 했다던지 하는 크고 작은 사고는 늘 의사소통 문제에서 비롯되었다.
제대로 업무지시를 받고 제대로 업무수행을 하는 것이 최우선이 아닌가 생각하다.
업무를 제대로 파악하고 이해하기 위해서 더 기초를 탄탄하게 잡아가는 시간이 필요할 것 같다.