상태관리 툴
리덕스
mobX
컨텍스트API
왜 필요하냐?
로그인한 사람 정보, 전역변수들 등 과 같이 사이트에 전반적으로 필요한 정보들을 중앙 레파지토를 두고 필요할 때마다 편하게 꺼내쓰는 용도,
중앙 저장소가 없다면, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 연결 연결 연결 해서 전달할 수 밖에 없다. 매우 불편
장단점
리덕스 : 에러추적에 용이, 코드량이 많다, 중앙저장소도 논리적으로 구분도 가능
mobX : 에러 추적이 어려움, 코드량이 적다
컨텍스트API : 가벼운 작은 프로젝트
어떤걸 쓸래?
비동기를 지원하기 쉽냐? 어렵냐?
컨테스트API는 비동기 요청의 요청, 성공, 실패를 다 구현해야함. 컴포넌트 안에 데이터를 요청하는 코드를 작성함
컴포넌트는 렌더링만 집중
화면을 데이터를 가져오는 것과 분리
리덕스의 원리
reduce에서 네이밍
전체 데이터 state 객체 정의
액션 을 통해 dispatch -> reducer에 적어둔 방식에 따라서 state 변경
미들웨어 : 리덕스에 없는 기능을 추가 시켜줌
3단 고차함수 화살표 3개짜리
const loggerMiddleware = ({dispatch, getState}) => (next) => (action) => {
console.log(action) // 액션을 실행하기 전에 console.log 한번 찍어주는 미들웨어
return next(action)
};
redux-thunk
thunk 미들웨어 -> 비동기 액션을 처리할 수 있게 도와주는 역할
Thunk : 지연, dispatch를 나중에, 모아서 여러개 할 수 있게 해주는 것
한번에 디스패치를 여러번 이어서 (then) 할 수 있게 해준다
redux-Saga
saga는 여러가지 이펙트. 메소드 등을 지원해준다(delay, throtle, debounce, takeLatest)
generator를 사용하여 구현
제너레이터는 yield를 통해 중단점을 둔 것
무한의 개념을 표현 가능 -> 이벤트리스너 역할을 할 수 있다.
지켜볼애들(이벤트리스너) 전체 실행 -> 로그인이란 액션이 실행될때까지 기다린다. -> 로그인 액션이 실행되면 특정 제너레이터를 실행한다 ->