Todo
📌 리액트 프로젝트에서 타입스크립트 정리
💻 Typescript Essentials 강의 : ch1 ~ ch7까지 🔺
💻 Redux로 상태관리하기 강의 : ch1 ~ ch3까지 ✔
💻 React로 나의 책장 만들기(Typescript) 강의 : 프로젝트 개요 ~ 책 삭제하기까지 🔺
👩💻 toy-project
💡 프론트엔드 면접 준비 - google에서 면접 질문 A4 출력
Error & Solution
What I learned
- Redux Basic
1. Redux
< 단일 스토어 만드는 법 >
import redux - 액션 정의 - 액션을 사용하는 리듀서를 만들고 - 리듀서 합치기
- 최종 합쳐진 리듀서를 인자로 단일 스토어를 만든다.
< 리액트에서 스토어를 사용하는 법 >
import react-redux - connect 함수를 이용해서 컴포넌트에 연결
2. Action은 사실 그냥 object객체이다. 스토어의 상태 변경
두 가지 형태의 액션이 있다.
- {type:'TEST'} // payload가 없는 액션
- {type:'TEST', params:'hello'} // payload가 있는 액션
type만이 필수 프로퍼티이며, 문자열이다.
< 리덕스 액션 생성자 redux action creator >
function 액션 생성자(...args){return action;}
createTest('hello') // {type:'TEST', params:'hello'} return
< 리덕스의 액션이 하는 일 >
- 액션 생성자를 통해 액션을 만들어낸다.
- 만들어낸 액션 객체를 리덕스 스토어에 보낸다.
- 리덕스 스토어가 액션 객체를 받으면 스토어의 상태값이 변경
- 변경된 상태 값에 의해 상태를 이용하고 있는 컴포넌트가 변경
= 액션은 스토어에 보내는 일종의 인풋이라고 생각할 수 있다.
3. 액션을 주면, 그 액션이 적용되어 달라진(달라지지 않을 수도) 결과를 만들어줌
그냥 함수이다. pure function, Immutable
function reducer(previousState, action){
return newState;
}
액션을 받아서 스테이트를 리턴하는 구조
인자로 들어오는 previousState와 리턴되는 newState는 다른 참조를 가지도록 한다.
4. 스토어를 만드는 함수
const store=createStore(reducer);
createStore<S>(
// 3가지 인자
reducer: Reducer<S>,
preloadedState: S,
enhancer?: StoreEnhancer<S>
): Store<S>;
- store.getState();
- store.dispatch(action);, store.dispatch(액션생성자());
- const unsubscribe=store.subscribe(()=>{});
리턴이 unsubscribe라는 점. unsubscribe();하면 제거
- store.replaceReducer(다른 리듀서);
5. react-redux 안쓰고 Redux를 React에 연결하기
단일 store를 만들고 subscribe와 getState를 이용하여, 변경되는 state 데이터를 얻어
props로 계속 아래로 전달
componentDidMount - subscribe
componentWillunmount - unsubscribe
6. react-redux 쓰고 연결하기
Provider 컴포넌트를 제공
connect 함수를 통해 "컨테이너"를 만들어준다.
컨데이너는 스토어의 state와 dispatch(action)를 연결한 컴포넌트에 props로
넣어주는 역할을 한다.
- 어떤 state를 어떤 props에 연결할 것인지에 대한 정의
- 어떤 dispatch(action)를 어떤 props에 연결할 것인지에 대한 정의
- 그 props를 보낼 컴포넌트를 정의- Redux Advanced
1. 비동기 작업을 어디서 하느냐가 제일 중요하다.
2. 리덕스 미들웨어
- 미들웨어가 디스패치의 앞뒤에 코드를 추가할 수 있게 해준다
- 미들웨어가 여러개면 미들웨어가 순차적으로 실행된다.
- 두 단계가 있다.
스토어를 만들 때, 미들웨어를 설정하는 부분 {createStore, applyMiddleware } return redux
디스패치가 호출될 때 실제로 미들웨어를 통과하는 부분
- dispatch메소드를 통해 store로 가고 있는 액션을 가로채는 코드
3. redux-thunk
- 리덕스 미들웨어
- 리덕스를 만든 사람이 만들었다.
- 리덕스에서 비동기처리를 위한 라이브러리
- 액션 생성자를 활용하여 비동기처리
- 액션 생성자가 액션을 리턴하지않고, 함수를 리턴함
4. redux-saga
- 미들웨어
- 제너레이터 객체를 만들어내는 제너레이터 생성 함수를 이용한다.
- 리덕스사가 미들웨어를 설정하고, 내가 만든 사가 함수를 등록한 후
- 사가 미들웨어를 실행한다.
- 그리고 등록된 사가 함수를 실행할 액션을 디스패치하면 된다.Thinking
항상 느끼지만 익숙해지는게 먼저다. 그리고 반복하면 익숙해진다. 역시 인간이란... 리덕스 강의 두 번째 들으니 확실히 이해가 더 잘됐다.
