[패스트캠퍼스] 프론트엔드 강의 학습일지(Redux)

국비지원교육으로 패스트캠퍼스에서 진행하는 프론트엔드 강의를 듣고 정리한 내용입니다.

---

Redux

리덕스는 상태 관리 라이브러리이다.

State를 Store에 넣어놓고 사용할 수 있다.

 

REDUCER

상태 변경사항을 결정하고 업데이트된 상태를 반환하는 함수이다.

인수로 조치를 취하고, store 내부의 상태를 업데이트 합니다.

 

Store

클래스가 아니고 Methods가 있는 객체 저장소이다.

애플리케이션의 전체 상태 트리를 보유한다,  내부 상태를 변경하는 방법은 상태에 대한 Action을 전달하는 것이다.

 

 

Props와 State의 구별

Props

• Properties의 줄임말
• 컴포넌트상 서로 통신하는 방법
• 상위 구성 요소에서 아래쪽으로 흐른다(부모 -> 자식)
• 자식이 가지고 있는 props를 변경하려면 부모 컴포넌트의 state를 변경해야 한다.

 

State

• 부모 컴포넌트에서 자식 컴포넌트로 data를 보내는 게 아니고, 하나의 컴포넌트 안에서 데이터를 전달하기 위해 사용함(예를 들어서 검색 창에 글을 입력할 때 글이 변하는 것은 state로)
• state is mutable(조작할 수 있는) / State는 자체적으로 변경할 수 있다.
• state가 변하면 re-render 된다.

 

미들웨어 없이 리덕스 카운터 앱 만들기

앱 만들기

폴더를 만들고 그 안에서 명령어를 칠 때는 ./ 를 사용

npx create-react-app ./ --template typescript

폴더도 같이 생성되게 하려면 폴더명과 함께 사용(ex: my-app)

npx create-react-app my-app --template typescript

 

리덕스 설치

npm install redux --save

 

Subscribe()

change listener를 추가합니다.
작업이 전달될 때마다 호출되며 상태 트리의 일부가 잠재적으로 변경될 수 있습니다.
그런 다음 getState()를 호출하여 내부의 현재 상태 트리를 읽을 수 있습니다.

store.subscribe(render);

https://redux.js.org/api/store#subscribelistener

Store | Redux

 

combineErducers

 

provider

리덕스 스토어에 접근할 수 있게 해주는 것

최상위에 감싸주면, 어떤 컴포넌트던 스토어에 접근할 수 있다.

provider는 React Redux라는 라이브러리에서 가지고 올 수 있어서 설치를 해준다.

npm install react-redux --save

 

useSelector

스토어의 값을 가지고 오는 hooks

 

useDispatch

스토어에 있는 dispach 함수에 접근하는 hooks(액션을 보내는 것)

 

리덕스 미들웨어

액션을 dispatch 하고 리듀서에 도달하는 순간 정해놓은 작업을 하는 중간지입니다.
로깅, 충돌 보고, 비동기, API 통신, 라우팅 등을 위해 사용합니다.

로깅으로 사용하여 출력

 

로깅 미들웨어 생성하기

리덕스를 이용할 때 로그를 찍어주는 미들웨어

const loggerMiddleware = (store: any) => (next: any) => (action: any) => {

code..

};

 

리덕스 Thunk

thunk:  일부 지연된 작업을 수행하는 코드 조각

리덕스를 사용하는 앱에서 비동기 작업을 할 때 많이 사용하는 방법이 redux-thunk 이다.

npm install redux-thunk --save

 

비동기 작업은 언제 하나?

서버에 요청을 보내서 데이터를 가져올 때 주로 비동기 요청을 보낸다.

테스트를 위해 Dummy 데이터를 가지고 와서 axios로 API 요청을 해본다.

axios 모듈 설치

npm install axios --save

 

리덕스 toolkit

리덕스 로직을 작성하기 위한 공식 권장 접근 방식이다.

리덕스를 사용할 때 복잡해지는 부분을 쉽게 작성할 수 있게 도와주는 것이다.

https://redux-toolkit.js.org/tutorials/quick-start

Quick Start | Redux Toolkit

npm install @reduxjs/toolkit react-redux

리덕스가 구현되어 있는걸 바로 시작할 수 있다.

https://github.com/reduxjs/cra-template-redux

GitHub - reduxjs/cra-template-redux: The official Redux template for Create React App