[TIL] 22.04.04-useState 동기화, Reset state to initial with redux-toolkit, npm inst

오늘 배운것

• 계획대로 행동하지 않으면 기하급수로 할일이 쌓인고, 악순환의 반복이다. 그동안 일도 많고 생각도 많았는데 다시 하나하나씩 루틴으로 복귀해야겠다.
• 사이드프로젝트를 하나시작했다. 익숙하지 않은 구조에 파악하는데 조금 애먹었다. 오픈까지 일정이 좀 남긴했지만 스케일이 점점커지게되니 프로젝트에 대한 관심과 시간을 좀더 할애해야할것같다.
• 텍스트필드 입력에 대한 예외처리를 너무 얕봤다. ㅜㅜ

useState 동기화

useState의 비동기작업으로 validation을 통한 팝업처리(예외처리)에 곤욕을 겪었다.
기본적으로 이전state값을 콜백으로 전달하는게 가장 이상적이지만 로직이 복잡해지면 이것도 먹히지 않는다.
아래 글에서 나온 방법은 모두 실패...
결국 로직을 손봐서 해결하긴했다.
https://intrepidgeeks.com/tutorial/use-setstate-for-synchronization

setState 동기적으로 사용하기

Reset state to initial with redux-toolkit

submit 이후 reset코드를 작성하는데, 의외로 시간을 너무많이 허비했다.
첫번째 코드)
filter 내장함수로 코드 짯으나 실패

deleteOneFile: (state, action) => {
      state.files =
        filter((f) => f.kind !== action.payload
      );
    },

두번째코드)
아래 이니셜스테이트 값으로 적어도 무반응

deleteOneFile: () => initialState

세번째코드)
splice 메서드 활용
splice는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경.

deleteOneFile: (state, action) => {
      state.files.splice(
        state.files.findIndex((file) => file.name === action.payload),
        1
      );
    },

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

Array.prototype.splice() - JavaScript | MDN

https://stackoverflow.com/questions/59424523/reset-state-to-initial-with-redux-toolkit

Reset state to initial with redux-toolkit

npm install과 npm install --save

--save 옵션이 없는경우 현재 node_modules에 설치
--save 붙일경우 package.jsond의 dependencies에 추가될경우 프로젝트를 받고 npm install할경우 함께 설치되므로
협업시에는 --save를 붙이는 것이 좋음