1. React
State
상태관리

2. 목차
02 상태(STATE), 프론트에서의상태관리
03
04
05 결론
01 주제선정이유
클라이언트상태종류및특징
REDUX 보단REACT-QUERY ?

3. 주제선정이유
1. 애플리케이션에서상태는많은부분을차지하며그만큼중요!
2. 사람들에게널리알려진라이브러리중하나인REACT!
상태관리방법이다양
3. 주제를통해앞으로의상태관리방법선택에대한방향제시
01

4. 상태(STATE)
02 일상생활
앉아있는상태, 코딩하는상태, 누워있는상태

5. 상태(STATE)
02
이미지, 게시글, 로그인정보, 좋아요, 날짜등
애플리케이션

6. 상태(STATE)
02 STUDYMOA-MOIM-WEB PROJECT

7. 상태(STATE)
02
PROPS DRILLING 현상!

8. REACT(프론트)
에서의상태관리
02
1. 지역상태(LOCAL)
useState
2. 전역상태(GLOBAL)
3. 서버상태(SERVER)
Context api, useReducer
외부라이브러리: Redux, Recoil 등
SWR, React-Query

9. 클라이언트상태종류및특징
03

10. 클라이언트상태종류
및특징
03
2. RECOIL, JOTAI
3. REDUX, ZUSTAND
1. CONTEXT API

11. 03 CONTEXT API
특징 react에서자체적으로제공하는기술
사용하기위한코드구성이간결

12. 03 CONTEXT API
특징 react에서자체적으로제공하는기술
사용하기위한코드구성이간결

13. 03 CONTEXT API
장점 자체제공기술이기때문에추가설치가필요가없다.
코드가간결
props drilling 방지에유용
단점 상태값변경시, provider로감싼모든자식컴포넌트가리렌더링
추가설치필요없는부분외엔다른라이브러리에비해큰장점이없음

14. 03 CONTEXT API
장점 자체제공기술이기때문에추가설치가필요가없다.
코드가간결
props drilling 방지에유용
단점 상태값변경시, provider로감싼모든자식컴포넌트가리렌더링
추가설치필요없는부분외엔다른라이브러리에비해큰장점이없음

15. 03 RECOIL

16. 03 RECOIL
context api recoil
React 트리에직각을이루어서그래프로존재
Bottom-Up 방식(상향식)

17. 03 RECOIL
파생된상태와쿼리
독립적으로관리되는
상태에서비동기처리
연관된컴포넌트만리렌더

18. 03 RECOIL

19. 03 RECOIL
set, state
state
set
읽기전용
쓰기전용

20. 03 RECOIL
selector
getter, setter 커스텀
그외 useResetRecoilState, useRecoilStateLoadable, useGetRecoilValueInfo 등

21. 03 RECOIL
장점
코드복잡도감소
단점
초심자가사용하기좋음
React와같은개발방향성
상태를분산하여코드스플리팅가능
부족한생태계
상태관리의세분화로디버깅의어려움
안정성에대한의문

22. 03 JOTAI
Recoil과비슷하지만key 필요X
작은번들크기
Recoil의1/10 사이즈!
Redux에비해상대적으로작음

23. 03 JOTAI
useAtomValue,
useSetAtom

24. 03 JOTAI
장점
Recoil과비슷하고쉬움
단점
부족한생태계
Tutorial이상세
다양한utils, 가벼움
꾸준히업데이트
계속해서api 변화할가능성

25. 03 ZUSTAND
Redux와유사
jotai보다더작음!
Top-Down 방식(하향식)
Flux 패턴
단방향데이터흐름

26. 03 ZUSTAND

27. 03 ZUSTAND
장점
jotai보다도가벼움
단점
부족한생태계
최근다운로드수가많음
Redux Devtools 사용가능
Store를사용하지만적은보일러플레이트

28. 03 REDUX
압도적인사용량의상태관리라이브러리!

29. 03 REDUX
Store
Action
Dispatch
Reducer
저장소역할
내부상태를변경하는방법
상태변경을요청하는메서드
기존상태, 전달받은Action으
로새로운상태반환순수함수
useSelector 상태값을읽어오는역할

30. 03 REDUX
Store
Reducer
저장소역할
기존상태, 전달받은Action으
로새로운상태반환순수함수
useSelector 상태값을읽어오는역할
Dispatch 상태변경을요청하는메서드
Action 내부상태를변경하는방법

31. 03 REDUX
장점
가장오래된상태라이브러리
단점
작은기능만들때도많은파일작성필요
생태계가제일활발
훌륭한Devtools
RTK 활용으로더욱편리
러닝커브가높음
store 중앙화로효율적인전역상태관리
미들웨어활용으로비동기작업쉽게구현
RTK가있어도비동기작업시saga,
thunk 등추가적인라이브러리필요

32. 03 REDUX
Redux는API 통신및비동기
상태관리를위한라이브러리X

33. 03 REDUX
카카오페이
My 구독
Redux는API 통신및비동기
상태관리를위한라이브러리X

34. 04 REDUX보단REACT-QUERY ?
강력한비동기상태관리!

35. 04 REDUX보단REACT-QUERY ?
Redux
비동기데이터처리시별도의상태구현필요
React-Query
클라이언트와서버상태경계X
비동기데이터처리상태제공
간단한api에도많은보일러플레이트
서버와클라이언트에대한상태구분확실
에러발생시에도별도의에러처리필요
onError함수를통한에러처리
데이터캐싱으로반복적인비동기호출방지
주기적으로refetching하여동기화작업

36. 05 결론

37. or
05 결론
서버상태와클라이언트상태를
확실히구분!
디버깅용이하고잘구축했을때서
버, 클라이언트까지다사용가능!

38. or
05 결론
서버상태와클라이언트상태를
확실히구분!
디버깅용이하고잘구축했을때서
버, 클라이언트까지다사용가능!

39. https://www.youtube.com/watch?v=41tFNtwWE3o
https://velog.io/@jay/10-minute-react-query-concept
https://velog.io/@sunohvoiin/React%EC%9D%98-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC-Redux-vs-React-Query-Recoil
https://www.youtube.com/watch?v=YTDopBR-7Ac&t=142s
https://velog.io/@kandy1002/React-Query-%ED%91%B9-%EC%B0%8D%EC%96%B4%EB%A8%B9%EA%B8%B0
https://jotai.org/
https://recoiljs.org/ko/
https://ko.redux.js.org/introduction/why-rtk-is-redux-today
https://www.tcpschool.com/react/react_redux_intro
https://1-blue.github.io/posts/Redux/#-redux%EC%9D%98-%ED%95%B5%EC%8B%AC-%EA%B0%9C%EB%85%90%EB%93%A4
https://github.com/pmndrs/zustand
https://programming119.tistory.com/263
Reference