0. Redux란?

Redux란?

Redux 시작하기 | Redux

Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다. Redux는 여러분이 일관적으로 동작하고, 서로 다른 환경(서버, 클라이언트, 네이티브)에서 작동하고, 테스트하기 쉬운 앱을 작성하도록 도와줍니다. 여기에 더해서 시간여행형 디버거와 결합된 실시간 코드 수정 과 같은 훌륭한 개발자 경험을 제공합니다. 여러분은 Redux를 React 나 다른 뷰 라이브러리와 함께 사용할 수 있습니다.

https://ko.redux.js.org/introduction/getting-started/

• 관련 영상
Redux
예측 가능한 애플리케이션의 상태 저장소인 Redux를 다루는 수업입니다. 이 수업에서는 순수한 웹기술인 HTML, JavaScript와 Redux만을 이용해서 웹애플리케이션을 만들어 볼 것입니다. 이 수업은 아래와 같은 내용을 다루고 있습니다. 아래 내용은 다루고 있지 않습니다. 리덕스를 이용해서 더 단순한 코드로 더 복잡한 애플리케이션을 만들고 싶은 분에게 추천합니다. 참고로 자바스크립트 초급자에게는 필요하지 않은 도구입니다.

https://opentutorials.org/module/4078

Redux DevTools

Redux DevTools for debugging application's state changes.

https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ko

• React는 OOO OOOOO를 위한 JS 라이브러리

• Redux는 데이터를 OOOO 관리함으로 예측 가능하게 데이터를 관리하기 위함

• 공통점 : 복잡한 프로젝트에서 복잡도를 낮춰줌

Redux 플로우

1. 하나의 중앙 데이터 store를 갖습니다.(데이터는 state(상태)를 말합니다)

2. 상태값을 바뀔 때마다 데이터들의 state 값을 수정해줄 reducer 함수를 만듭니다.

3. dispatch를 사용하여 reducer에게 state 값을 수정하라고(action 값을 전달) 요청합니다.

4. reducer가 state값을 수정하면, subscribe를 사용하여 수정된 부분을 UI에 업로드합니다.

데이터는 어떻게 변경될까요?

const reducer = (state = 0, action) => {
  switch (action.type) { // action.type이 "PLUS"라면 state 값을 1 더할 것입니다.
    case "PLUS":
      return state - 1;
    case "MINUS":        // action.type이 "MINUS"라면 state 값을 1 뺼 것입니다.
      return state + 1;
    default:
      return state;
      // action.type이 "PLUS, MINUS" 모두 아니라면 state 값의 변화는 없습니다.
  }
};

Redux를 사용하는 이유

<AuthContextProvider>
		<UIContextProvider>
				<UserForm/>
		</UIContextProvider>
</AuthContextProvider>

Redux 설치하기

npm i redux // javascript

npm i redux-react // React js