리액트 상태 관리 툴
참조 - https://mmsesang.tistory.com/entry/2021%EB%85%84-React-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%EC%A0%84%EC%9F%81-Hooks-Redux-Recoil
https://velog.io/@kimhyo_0218/React-Query-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%BF%BC%EB%A6%AC-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-useQuery
Redux
자바스크립트 모든 프레임워크에서 독립 실행하는 상태 관리 툴로 사용 가능하다.
Store라고 하는 객체를 제공하며, 한 번 설정으로 어플리케이션의 모든 상태를 포함하고, 필요할 때 업데이트 한다.
Recoil
러닝 커브가 있지만 다른 상태 관리 라이브러리와 마찬가지로 전역 상태 관리의 문제를 해결한다.
- 리액트스러운 접근과 단순함
Recoil의 심플함은 어떤 것에도 뒤지지 않는다. Recoil을 언제 사용할지는 앱의 아키텍처 결정에 달려있으며, 심플함을 선호하는 사람이라면 Recoil을 고려해볼만 하다.
R-Q
비동기 로직을 리액트스럽게 다룰 수 있게 해주는 라이브러리다.
server state를 아주 효율적으로 관리할 수 있다.
기존에 isLoading, isError, refetch, 데이터 캐싱 등 개발자가 직접 구현하려면 꽤 귀찮거나 까다로웠던 기능을 제공해준다.
SWR
데이터베이스의 특정 상태(정확히는 API의 응답)를 직접 컴포넌트로 연결한다. useSWR 을 통해 원격 서버의 특정 상태에 연결된 스트림을 얻을 수 있으며 그 스트림을 통해 원격 상태에 접근할 수 있고 이를 통해 데이터를 직접 화면에 뿌려줄 수 있다.
CSS 라이브러리
Material UI
-
장점
리액트 기반 UI 라이브러리 중 가장 인기 있고 성숙한 라이브러리
지원하는 기능과 디자인이 다양함
stable 버전에서는 inline style을 사용하고 있어, 컴포넌트 커스터마이징 하는게 생각보다 쉽지 않음 -
단점
styled-component 사용시 주의
비교적 복잡하여 사용하기 위한 학습이 필요
Ant Design
-
장점
material UI보다 비교적 사용하기 편함 -
단점
사이트나 공식 문서 등은 영어도 지원하지만 github issue에서는 중국어가 자주 등장
Chakra UI
-
장점
WAI-ARIA 를 엄격히 준수하여 접근성이 훌륭하면서도 개발이 빠름
WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications)
: 웹 페이지, 특히 동적 콘텐츠, 그리고 Ajax, HTML, 자바스크립트 및 관련 기술로 개발된
사용자 인터페이스 구성 요소의 접근성을 증가시키는 방법에 대해 규정한 W3C가 출판한 기술 사양
전체 어플리케이션/컴포넌트에 테마 및 다크모드 적용이 쉬움
모든 컴포넌트들이 결합해서 사용하는 것을 염두에 두고 개발됨
자체적으로 만든 hooks가 다양 -
단점
Chakra 사용 시 h1, button 등 기본 html 태그의 속성이 사라짐
아이콘을 제공하나 아이콘 종류가 많진 않음
Date Picker, Search 등의 기능이 없음
React-Bootstrap
-
장점
React의 상태를 사용하여 업데이트하므로 상태를 관리하기가 더 쉬움 (Bootstrap은 DOM의 상태를 직접 조작)
Bootstrap 테마를 손쉽게 선택할 수 있음 -
단점
Bootstrap 3.x 버전을 기반으로 제작되어 style이 최신화되어 있지 않음
Reactstrap
-
장점
bootstrap4 의 최신 style을 적용할 수 있음 -
단점
Bootstrap CSS가 포함되어 있지 않아 필수로 설치해야 함
테일윈드가 핫하다는데 공부해봐야겠다.
Short Report
커리큘럼상 어쩔 수 없지만 리액트를 처음 접하는 사람이라면 다들 적응하고 기초를 다지느라 힘들어 하는 것 같다. 따라가려면 시간을 쪼개서 열심히 공부하는 수 밖에 없다.
