리덕스 툴킷

리덕스 툴킷은 리덕스를 개량한것이다.
리덕스를 사용하기 위해 작성했던 ducks패턴의 요소들이 코드의 양을 늘린다는 개발자들의 불만이 발생하기 시작하여,
리덕스 팀에서 코드는 더 적게, 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든것이 리덕스 툴킷이다.
새로운 것이 아니라, 기존에 배웠던 리덕스와 구조나 패러다임이 모두 똑같다.
리덕스의 전체 코드의 양을 줄이기 위해 새로운 API가 추가 되었고, ducks패턴의 요소들이 어느정도 자동화 되었다.
useSelector를 통해서 사용하는 것은 모두 똑같다.
모듈쪽에서 작성하는 부분이 조금 바뀌었는데,
Slice를 이용하면, Reducer, Action Value, Action Creator를 한번에 구현할수 있다.

devtools의 사용법은 아직 낯설다.

thunk와 immer를 공부해봐야한다.

Immer란 무엇인가?

리액트에서 불변성을 유지하는 코드를 작성하기 쉽게 해주는 라이브러리이다.
리액트에서 불변성이 지켜지지 않을 경우, 값이 바뀌어도 바뀐것을 감지하지 못한다.
immer를 쓰면, 불변성을 유지하며 객체구조를 업데이트 해줄수 있다.

리덕스 미들웨어

Action - > 미들웨어 -> 리듀서 ->스토어

이런 일련의 과정으로 흘러간다.

미들웨어는 어떤 프로그램을 실행하기 위해 버튼을 클릭했을때, 바로 진행되는 것이 아닌 필요한 시간만큼 대기한 후에 구동할수 있도록
작업해주는 것이다.

리덕스 미들웨어를 사용하는 이유는 서버와의 통신을 위해서 사용하는 것이 대부분이고, 그중에서 가장 많이사용하는 것이
Redux-thunk 이다.

Thunk

thunk를 사용하면, dispatch할때 객체가 아닌 함수를 dispatch할수 있게 해준다. 그래서 중간에 하고자 하는 작업을 함수를 통해
넣을수 있고, 그것이 중간에 실행되는 것이다.

Dispatch - 함수 - 함수실행 - 함수안에서 dispatch (객체)

이것을 쓸때는 기본적으로 extraReducer에 thunk를 등록해야 한다

툴킷에서는 createAsyncThunk라는 API를 사용해서 thunk함수를 생성할 수 있다.
이 API는 함수 인데, 첫번째 인자에는 Action Value, 두번재 인자에는 함수가 들어간다. 하고 싶은 작업들을 여기서 구현 하면 된다.

실행을 해봐야겠다..!

이렇게 구현을 하면 조금 느리게 한 3초뒤에 계산이 다다다다 된다.
이경우에는 누를때마다 바로바로 더해지는 것이 좋지만,
일단 예시로 쓰는것이니깐…

계속 되는 과제의 삽질… ㅎ

Memo

부모 컴포넌트가 자식 컴포넌트에게 값을 넘겨주지 않을때.
메모를 자식 컴포넌트의 변수에 적용하면, (컴포넌트 전체에 씌우기)

자식 컴포넌트는 리렌더링이 일어나지 않는다.

Axios

Json Server

통신 맛보기.
맛만 보고 싶은데… 한상 차려야 하니 죽을맛.

yarn add json-server 한 뒤에
yarn json-server —watch db.json —port 3001 이라고 친다
db.json이 만들어진다.

서버가 잘 생성되었다면, 터미널 하나 추가해서 화면으로도 확인을 해야 한다.

서버의 터미널에서는 누군가 GET을 했다며 알려준다.
200이라는 초록색 숫자를 보니 연결이 잘 된것인가보다.

그 다음단계는 배포 단계에서 하면 될거 같다며,

바로 axios로 넘어간다.

GET - read
POST - create
DELETE - delete
PATCH - update

이렇게 CRUD를 구현할 수 있다.

GET

서버의 데이터를 조회할때 사용

사용 방법 - 기본공식
axios.get(url[,config])

공식문서를 참조하도록 하자. config가 어떤 역할을 하는지…

계속 todos 로 하고 있어서, 카운터 말고 혼자만들었던 todos를 다시 가져왔다.

yarn add axios 해서 axios를 설치해준다.

원래 짜두었던 코드에 axios를 적용해보았다.

Get 방식이라, 아무것도 구현한게 없는 그냥 빈 페이지라면 db.json에 넣어두었던 데이터가 뜨거나,
무언가 뜨는 페이지라면 콘솔창에서 반드시 확인할수 있다. 데이터가 잘 들어가있는지 확인을 해보면,

콘솔창에 잘 들어가 있는 것을 알수 있다.

이것이 get 방식의 코드를 작성하는 방법이었다.

이렇게만 봐서는 사실 확 와닿진 않는데, async와 await을 써서 비동기적으로 렌더링이 발생하게 만든다음 필요한 메소드는 useEffect를 통해 랜더링이 시작할때 단 한번 실행되게 설정해뒀다.

이렇게 하면 콘솔에는 단 하나의 단일한 값이 떠야 하는건데… useState 값이 null 이라 그 값도 함께 콘솔에서 확인할수 있었다.

POST

서버에 데이터를 추가할때 사용.
요청에 대한 로직은 BE개발자가 구현하는 것이기 때문에 추가외에 다른 용도로 사용될수 있지만, 보통은 클라이언트 데이터를 body 형태로 서버에 보내고자 할때 사용한다.

Post 코드 구조

axios.post(url[,data[,config]])

onSubmitHandler가 실행될때 todo를 body에 담아 서버로 POST 요청을 보내는 것이다.

직접 input 창을 만들고 버튼을 클릭하면 하단에 내용이 기록되게 하는 작은 컴포넌트를 만든다.

onSubmitHandler에 axios가 실려 보내진다는 것을 알수 있다.

새로고침을 해야 데이터가 들어간다.. 왜지…

여태껏 이랬던 적이 없는데 ;

그걸 찾아보라고 한다. 이미 구현한적이 있다고 …

끙..

그리고 서버를 구축할때는 콘솔창을 열어 네트워크를 확인해가면서 작업을 하는 것이 좋은데,

다 잘 적용이 되어있다.

응답해더 (response header)와 요청헤더 (request header)를 보고 각 항목들이 어떤 것을 보여주는지 더 알아보라고 한다.

흠…

payload라는 탭에서는 내가 보낸 body 값을 확인할수 있다는데, 나는 payload탭은 없고, preview 만 있어서 내가 보낸 데이터 전체를 확인할수 있었다.

응답 탭에서는 내가 보낸 post 요청에 대한 서버의 응답값을 확인할수 있었다.

response의 경우, 자동으로 값이 생성되는 것이 아니라, FE개발자가, BE개발자에게 요청한 것을 직접 개발을 해야 생기는 값이다.

Json-server의 경우 post요청을 했을때 클라이언트가 보낸 body를 그대로 응답해주도록 만들어진 패키지 이기 때문에 위와 같이 표시 된다.

DELETE

Axios delete 는 저장되어 있는 데이터를 삭제하고자 요청을 보낼때 사용한다.

axios.delete(url[,config])

오류가 뜬다.. 코드를 잘못 받아썼나보다..

따옴표가 아니라 백틱이다.

새로고침 하니 지워졌다.

휴…

PATCH

Axios patch

어떤 데이터를 수정하고자 서버에 요청을 보낼때 사용하는 메서드 이다. 다만 이것은 http환경에서 서로가 한 약속이자 문맥이기 때문에, 수정을 하고자 반드시 patch, put을 써야먄 하는 것은 아니다.
BE에 의해서 POST를 통해서 “수정”이라는 기능은 충분히 만들수 있기 때문이다. 다만 이러한 약속들을 대부분의 개발자들이 지키고 있다는 점…

axios.patch(url[,data[,config]])

수정..

한번도 해본적 없는데, 여기서 해보게 되는구나.

Todo를 수정하기 위해서 필요한 데이터는 2개이다. 수정하고자 하는 Todo의 id, 그리고 수정하고자 하는 값.
수정하고자 하는 값은 기존에 있던 todo라는 state를 사용하면 될 것이고, id는 직접 입력을 해서 url로 넘겨주는 방식으로 구현.

.env

환경변수를 관리해주는 것으로,
민감정보등을 숨겨서 처리가능하다.

정해진 양식이 있어서 그것을 준수해서 적용하면 적용이 될거 같다.

axios는 api 서버와 통신을 위해 도와주는 패키지 이다.
구체적인 명세는 api명세를 확인해가며 작업하자.

브라우저 네트워크 탭을 잘 봐야한다.

http method, status code와 같은 정보들은 BE개발자가 구현해주는 부분이며, 약속이자 문맥이므로 BE와 FE간의 커뮤니케이션이 잘 되어야 한다.

네트워크 통신 이후, 화면을 업데이트하고자 한다면, 별도로 FE에서 추가로 구현해야 한다.

다시 리덕스 툴킷 thunk 재복습

미들웨어란?

리덕스에서 dispatch하면, action이 리듀서로 전달되고, 리듀서는 새로운 state를 반환한다.
미들웨어를 사용하면 이 과정 사이에 하고 싶은 작업들을 넣어서 할수가 있다.

3초를 기다리는 작업 같은거..

리덕스 미들웨어의 경우, 서버와의 통신을 위해서 사용하는 것이 대부분이고, 그중에서도 가장 많이 이용되고 있는 것이 리덕스 thunk이다.

thunk를 사용하면 dispatch할때 객체가 아닌 함수를 dispatch 할수 있게 해준다.

Json server 에 접속을 해줬고, 사이트를 다시 열었다.
코드는 사실 추가하라는 대로 추가를 했을뿐 홀로 작성하라고 하면… 멘붕..?

리듀서쪽에 createAsyncThunk를 쓰고,
axios 도 임포트 해줬다.

물론 이 모든것들은 설치가 되어있어야 한다..!

그다음 initialState 값에, 처음으로 error: null 값을 넣어줬다.
그 바로 하단에 export 로 시작되는 통신용 변수를 선언해주는데 여기서 createAsyncThunk를 써주면 된다.

todos라는 리듀서를 불러주고, getTodos라는 이름도 지어준다.
그 밑에 async (payload, thunkAPI)를 화살표함수로 표현해서
try와 catch로 결괏값을 나눈다.
try에는 data를 변수로 지정해서 axios로 받아오고,
catch는 잘 안받아져 올때를 대비한 error를 받는다.
하단에 꼭 extraReducer도 함께 써주자.

이게 메인페이지로 가면,

이런형태로 추가가 되는데, 임의로 만든 extraReducer인 __getTodos를 임포트 시키는게 중요하다.

그리고 useEffect를 써서, dispatch 해준다. 의존성 배열이 빈상태가 아니라 dispatch 되는 그자체를 다루고 있기 때문에
실행은 dispatch되는 순간 단 한번 일어난다.
이렇게 하면, json server를 이용해서 axios 를 이용한 서버와의 교류가 되는 것이다.

사실 아직까진 뭐가 뭔지 모르겠다…

그다음으로 해준것이,
만들었던 extraReducer 부분에, 콘솔로그 대신 return 값을 받아보기로 했다.

그 다음엔 리듀서 작업을 해주어야 한다.

아직 리듀서에 아무런 작업을 하지 않았다.
어떤 값을 어떻게 요리할지는 리듀서에서…!

요즘엔 콘솔에 벌겋게 떠있는 오류들이 두렵지 않다.
없애나간다는 느낌으로 검색하며 다퉈보고 있다.

초반에는 학습자료를 보며 저렇게 한땀한땀 따라해보는 것에 의의를 뒀지만, 이제는 점점 한번만 보고서는 해나갈 수 없다는 것을 절실히
깨닫고 있다.

게다가 useCallback 이나 useMemo는 써보지도 못했다.
불필요한 리렌더링을 신경쓸 겨를 없이 기능 구현에만 집중하고 있는 코린이 생활도 어느덧 한달이 지났다...!

이렇게 하면 되는걸까 불안한 마음이 계속 들지만, 뭐 어쩔수 없다.
해보는 수 밖에.

불안할수록 더 많이 보는 방법밖에는 모르겠다.