24년 01월 18일 심화과정#6 Recoil, Styled-component

 

지난 주엔 전역 상태 관리 Global State Package의 대표 주자, Redux에 대해 배우고

나의 CRA 리액트 프로젝트에 적용해보았다. 

 

React-Redux를 사용할 때엔

action, reducer 개념부터 시작해서 useDispatch, useSelector까지

전체 흐름을 이해하는 데 꽤 애를 썼었다.

 

그러나 오늘 배운 Recoil 리코일! 

정말 얼마나 단순하던지..! 그리고 useState와 사용 방식이 비슷해 반갑기도 했다.

 

각설하고 배운 내용 정리 시작~!

---

Recoil

• 전역 상태 관리 패키지
• 20년도 Meta에서 리액트 전용으로 쓰라고 만들어준 패키지

[ Recoil의 특징 ]

• 리액트 전용이라서, 리액트 문법에 매우 어울린다.
• 불필요한 설정이나 연결 코드 등이 필요 없다.
• Hook의 구조로 되어 있다.
• 전역 변수의 개념으로 State를 관리하는 것이 동일
• 결론적으로, Store가 없다.!

[ Recoil의 장점 ]

• 리액트에 최적화 되어있다.
• Atomic 구조

[ Recoil의 단점 ]

• 아직 출시된 지 얼마 안 돼서 중간중간 이슈가 발생한다.
• 업데이트가 자주 되지 않아 개선이 조금 더디다. (⇒ 대체재: Zustand - flux 구조, Jotai - atomic 구조)

 

 

 

// css를 js에서 쓰게 하는 방식

// cascade, specificity가 해결됨

// className, id를 단위로 style을 주고 있지 않기 때문에 대박