일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- next.js
- JavaScript
- react
- docker
- CSS
- 이더리움
- BFS
- 파이썬
- TypeScript
- 타입스크립트
- 백준
- 백엔드
- 블록체인
- 프론트엔드
- 웹
- 알고리즘
- AWS
- HTML
- 이슈
- kubernetes
- 가상화
- node.js
- 쿠버네티스
- 리액트
- es6
- 자바스크립트
- 컴퓨터공학
- 솔리디티
- 클라우드
- k8s
- Today
- Total
즐겁게, 코드
야, 너도 상태관리 할 수 있어 1편 : 리코일이란? 본문
오늘은 리코일에 대한 이야기를 간단하게 해보려 합니다.
리코일은 페이스북에서 만든 상태 관리 라이브러리로, 리덕스에 비해 코드가 간결하고 직관적인 로직을 구성할 수 있다는 장점이 있습니다.
실제로 페이스북 팀에서도 "리코일은 리액트처럼 작동하고 생각합니다." 라는 내용을 장점으로 내세웁니다.
Context API와의 차이
컨텍스트는 리액트에 내장된 상태 관리용 API로, 별도의 라이브러리를 사용하지 않고도 상태를 관리할 수 있다는 장점이 있습니다.
다만 컨텍스트는 중첩 가능한 Provider
컴포넌트와 useContext()
훅을 활용해 provider - consumer
관계를 구현하는데, 이러면 여러 컨텍스트가 중첩될 경우 값을 재계산하는 과정에서 성능 하락이 있을 수도 있습니다.
한번 인증 정보, 상점의 물품 정보, 내 지갑 정보를 상태로 관리하는 어플리케이션이 있다고 가정하겠습니다.
그럼 컨텍스트를 활용하는 어플리케이션의 구조는 아래와 비슷하게 구성될 것입니다.
현재는 컨텍스트가 3개만 존재하기에 별로 문제가 없을 수도 있지만, 컨텍스트가 수십개로 늘어나게 되면 갈수록 여러 계층을 거치게 되며 성능 저하가 일어날 여지가 있습니다.
그러나 리코일은 이 문제를 완벽하게 해결하는데요, 리코일을 사용해 위 어플리케이션을 구성하면 아래와 같은 형태가 됩니다.
보시는 것처럼 데이터가 각 컨텍스트를 거치는 대신 리코일은 전역으로 사용할 값 의 단위로 데이터를 관리합니다.
이 값들을 리코일에서는 아톰(Atom)이라 부르는데, 원자라는 뜻처럼 리코일의 모든 동작은 아톰을 기반으로 합니다.
Redux와의 차이
flux 아키텍처 기반의 리덕스는 중첩된 컨텍스트와 같은 문제는 없었지만, 다른 엄청난 문제를 안고 있었습니다.
바로 어렵다는 것이었습니다.
이를 초심자가 배우기에는 액션, 디스패치, 리듀서의 관계도 난해했을 뿐더러, 실제로 구현할 때는 "스토어를 위한 store.js
를 만들고, todoReducer.js
를 만들고, rootReducer.js
를 만들고, 이를 combineReducers
로 묶는다..." 와 같이 쉽지 않은 과정의 연속이었습니다.
그러나 리코일은 복잡한 구현은 전부 내부적으로 처리하고, 사용자는 리코일 커스텀 훅만을 사용해 상태를 조작할 수 있게 함으로써 코드를 말도 안되게 간단하게 만들었습니다.
Ex. 리덕스와 리코일에서 값을 변경하는 방법 비교
// 리덕스 사용 예시
const todos = (state = [], action) => {
switch (action.type) {
case 'ADD_TODO':
return [
...state,
{
id: "1",
text: "새로운 할일!",
}
]
}
}
// 리코일 사용 예시
const [todos, setTodos] = useRecoilState(todoState);
setTodos([...todos, {id: "1", text: "새로운 할일!"});
이번 글에서는 리코일과 기존의 데이터 관리 방법의 차이를 간단하게 알아보았는데요, 다음 글부터는 리코일을 실제로 사용하는 방법을 소개하도록 하겠습니다.
'🎨 프론트엔드 > React.js' 카테고리의 다른 글
ReactNode, ReactChild, ReactElement 타입 비교 (0) | 2021.10.16 |
---|---|
야, 너도 상태관리 할 수 있어 2편 : 리코일 사용하기 (0) | 2021.08.25 |
클라이언트 인증 구현하기 : 인증이란 무엇인가? (0) | 2021.08.21 |
리액트의 key 속성은 왜 필요할까? (0) | 2021.08.16 |
redux-saga의 call에 관해 (0) | 2021.05.26 |