1주차 PBL 과제를 진행 하면서..
일단 아직도 주특기 주차가 1주밖에 안지난게 신기하다
체감상 2~3주는 지난 기분이다
일단
아에 시작부터 처음 해보는 타입스크립트를 적용 하고
타입스크립트를 활용한 리덕스사용 및 리덕스 툴킷 사용 등을 해봤다
먼저 타입스크립트를 사용한 이유는
- 높은 수준의 코드 탐색과 디버깅이 가능합니다 목적에 맞지 않는 타입의 변수나 함수들에서 에러를 발생시켜 버그를 사전에 제거합니다.
- 자바스크립트와 100%호환 됨으로 자바스크립트를 사용할수 있는곳이면 어디든 사용할 수 있습니다.
- 강력한 생태계 타입스크립트는 그리 오래되지 않은 언어임에도 불구하고 강력한 생태계를 가지고 있습니다. 대부분의 라이브러리들이 타입스크립트를 지원하며 마이크로소프트의 비주얼 스튜디오 코드(VSCode)를 비롯해 각종 에디터가 타입스크립트 관련 기능과 플러그인을 지원합니다.
위와 같은 이유로 타입스크립트를 선정했습니다 .
또한 이번 주차에는 리덕스와 리덕스 툴킷 에대해서 도 사용을 했는데
사용하는데 까지의 설계상의 어려움(?) 은 있겠지만 그래도
막상 사용하고 나니 상태관리도 그렇고 여러 Component 에서 자유롭게 사용할수 있는 점이 너무 좋았다 또한 리덕스툴킷을 사용해봄으로써 리덕스의 미들웨어를 createAsyncThunk 로 사용할수 있어서 편리하고 잘사용하면 코드의 생산성을 높일 수 있는 방법이 될 것 같다.
2. Redux and ReduxToolKit
1.Redux
Redux to Your Rescue
리덕스의 가장 큰 장점은, 중앙에서 스테이트를 관리한다에 있죠. 이런 중앙에 뭔가가 없다면, 데이터를 컴포넌트에서 컴포넌트로 전달을 계속 해야 하는 아찔한 상황이 발생합니다.
따라서 Redux는 store를 하나 만들고, 그곳에 스테이트를 모아둔 후, 컴포넌트는 redux store에 연결이 되어 있는 구조 입니다. 필요할때 빼서 쓰고, 또 필요에 따라 업데이트를 해주면 되는거죠
이 일을 일어나기 위해, 레덕스는 다음과 같은 데이터 흐름으로 구성되어 있습니다.
출처 https://github.com/reduxjs/redux/issues/653#issuecomment-216844781
- 1.컴포넌트에서 먼저 액션이라는 것을 dispatch 합니다.
- 2.이 action은 reducer를 호출 하고
- 3.reducer는 조건에 맞춰서 state를 업데이트 해줍니다 (redux store)
- 4.state가 바뀌면 그 스테이트를 get하고 있는 컴포넌트들이 조건에 맞춰 리렌더링 되게 됩니다. (혹은 새로 랜더링이 됩니다)
2.Redux ToolKit
출처 https://github.com/reduxjs/redux/issues/653#issuecomment-216844781
위 내용을 짧게 정리해 보면 다음과 같습니다.
- 리덕스는 데이터를 단방향으로 흐르게 하여 결과를 예측 가능하게 하고 디버깅을 쉽게 만든다.
- RTK는 기존 리덕스의 문제를 개선하고, 리덕스 로직을 작성하는 표준을 제안한다.
- 스토어 구성은 configureStore를 사용하자.
- 리덕스 로직을 작성할 때는 덕-패턴(ducks pattern) 형태로 작성을 돕는 createSlice를 사용하자.
- 비동기 로직은 createAsyncThunk를 사용해서 작성하자.
- 타입 스크립트를 지원하는 빌더 콜백(builder callback) 표기법을 사용하자.
- 프로미스 생명 주기를 따르는 액션 타입으로 비동기 로직을 관리해 보자.
- 데이터 패칭과 캐싱은 RTK Query를 사용해 보자.
