[부스트캠프 웹・모바일 7기 Tech Talk] 발표자 : 김성은 캠퍼

1. ⓒ NAVER Connect Foundation
Recoil:
React에 의한, React를 위한,
상태 관리 라이브러리
작성자:
김성은

2. ⓒ NAVER Connect Foundation
1. State
1.1 상태란 무엇일까?
1.2 좋은 상태 관리
2. Recoil
2.1 Recoil 시작하기
2.2 Context 이해하기
2.3 RecoilRoot
2.4 Atom
2.5 Selector
3. Recoil 써야할까
3.1 Recoil 써야할까
3.1 리액트스럽다.
3.2 React와의 호환성
3.3 비동기 처리
2

3. ⓒ NAVER Connect Foundation
CHAPTER 1.
state
리액트에서 상태의 의미

4. ⓒ NAVER Connect Foundation 4
1.1 상태란 무엇일까?
React state
- UI 상태
- Server 상태
- Form 상태
- URL 상태
…
React는 state가 변경되면,
적절한 컴포넌트만 효율적으로 갱신하고
렌더링합니다.

5. ⓒ NAVER Connect Foundation 5
1.1 상태란 무엇일까?
React state

6. ⓒ NAVER Connect Foundation
6
1.1 상태란 무엇일까?
“변화하는 데이터”
“렌더에 영향을 미치는 자바스크립트
객체”
state

7. ⓒ NAVER Connect Foundation
7
1.1 상태란 무엇일까?
state

8. ⓒ NAVER Connect Foundation
8
1.1 상태란 무엇일까?
state

9. ⓒ NAVER Connect Foundation
9
1.2 좋은 상태 관리
상태
관리
read update
create update
read update
create update
useState

10. ⓒ NAVER Connect Foundation
10
1.2 좋은 상태 관리
상태
관리
01 02 03
전역 상태
프로젝트 전체에 영향
지역 상태
컴포넌트 안에서만 관리
컴포넌트 간 상태
여러 컴포넌트에서 사용
useState
Context

11. ⓒ NAVER Connect Foundation
CHAPTER 2.
Recoil
리코일 이해하기

12. ⓒ NAVER Connect Foundation 12
2.1 Recoil 시작하기

13. ⓒ NAVER Connect Foundation 13
2.1 Recoil 시작하기
Recoil
2020 ReactEurope conference (20.05.14)
페이스북이 공식적으로 발표한 상태 관리
라이브러리
01
02
03
Flexible shared State
Derived data and queries
App-wide state observation

14. ⓒ NAVER Connect Foundation 14
2.1 Recoil 시작하기
Recoil 배경 - 1
1
2
props drilling
1
2

15. ⓒ NAVER Connect Foundation 15
2.1 Recoil 시작하기
Recoil 배경 - 2
1
2
Context - Provider
Consumer
Consumer

16. ⓒ NAVER Connect Foundation 16
2.1 Recoil 시작하기
Recoil 배경 -
2 Context
“Context를 이용하면 단계마다 일일이 props를 넘겨주지
않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다.”
공
유
관
리
의존성
주입

17. ⓒ NAVER Connect Foundation 17
2.2 Context API
item1
item2
item3
item4
item2

18. ⓒ NAVER Connect Foundation 18
2.2 Context
Provider
App
1 2 3 4 1 2 3 4
List Canvas
App
1 3 4 1 3 4

19. ⓒ NAVER Connect Foundation 19
2.2 Context
App
1 2 3 4 1 2 3 4
List Canvas
Provider 2
Provider 1
Provider 4
Provider 3

20. ⓒ NAVER Connect Foundation 20
2.2 Context
item1
item2
item3
item4
item5

21. ⓒ NAVER Connect Foundation
2.2 Context
1 2 3 4 1 2 3 4
Provider 2
Provider 1
Provider 4
Provider 3
1 2 3 4
Provider 2
Provider 1
Provider 4
Provider 3
Provider 5
5 1 2 3 4 5
5
1 2 3 4 5 1 2 3 4 5

22. ⓒ NAVER Connect Foundation 22
2.3 Recoil Data flow
Data flow

23. ⓒ NAVER Connect Foundation 23
2.3 Recoil Data flow
Data flow

24. ⓒ NAVER Connect Foundation 24
2.3 RecoilRoot
RecoilRoot
MutableSourceContext
AppContext
BoostcampTow
n
Provider/store

25. ⓒ NAVER Connect Foundation 25
2.4 Atom
Atom
- 데이터(상태) 단위
- 컴포넌트가 구독 가능

26. ⓒ NAVER Connect Foundation 26
2.4 Atom
Atom atom(options)

27. ⓒ NAVER Connect Foundation 27
2.4 Atom
useRecoilState
- 상태를 읽고, 업데이트하는
API
- Atom을 구독

28. ⓒ NAVER Connect Foundation 28
2.4 Atom
useRecoilState
useRecoilValue
useSetRecoilState
useResetRecoilState

29. ⓒ NAVER Connect Foundation 29
2.5 Selector
Selector
- 순수 함수
- 파생된 상태

30. ⓒ NAVER Connect Foundation 30
2.5 Selector
Selector

31. ⓒ NAVER Connect Foundation
CHAPTER 3.
Recoil 써야할까
Recoil의 장점

32. ⓒ NAVER Connect Foundation 32
3.1 Recoil 써야할까?
Recoil 써야할까?
experimental devtools
npm v0.7.6
npm

33. ⓒ NAVER Connect Foundation 33
3.2 리액트스럽다.
Reactish boiler-plate
action
action creator
createStore
dispatch
ㅋ
selector

34. ⓒ NAVER Connect Foundation 34
3.2 리액트스럽다.
Atom
useState
useRecoilState
Reactish

35. ⓒ NAVER Connect Foundation 35
3.3 React와의 호환성
React와의 호환성
우리는 동시성 모드를 비롯한
새로운 React의 기능들과의 호환 가능성도 갖는다.
Concurrent Mode
Recoil
React

36. ⓒ NAVER Connect Foundation 36
3.4 비동기 처리
비동기
처리 Selector
Loadable
Suspense

37. ⓒ NAVER Connect Foundation 37
3.4 비동기 처리

38. ⓒ NAVER Connect Foundation 38
3.4 비동기 처리
Loading…

39. ⓒ NAVER Connect Foundation
3
39
3.4 비동기 처리
2
1
1 1
로딩중…
2
2
로딩중…
3
3
로딩중…
렌더링
3
렌더링
1
렌더링
2
(2초) (2초) (2초)
waterfall

40. ⓒ NAVER Connect Foundation 40
3.4 비동기 처리
async Selector

41. ⓒ NAVER Connect Foundation 41
3.4 비동기 처리
Suspense

42. ⓒ NAVER Connect Foundation 42
3.4 비동기 처리
Loadable

43. ⓒ NAVER Connect Foundation 43
감사합니
다.