[TIL/React] 2023/06/09

loading spinner 구현하기 🟣

loading spinner를 구현하기에 앞서, action이 무엇인지 console에 찍어봤다. action은 기본적으로 '객체'이다. action 객체 내부에서 'requestStatus라는 key와 fulfilled라는 value'로 구성된 프로퍼티를 확인할 수 있었다.

그렇다면 requestStatus를 활용해서 'pending'일 때에는 loading spinner를 보여주지 않고, 'fulfilled'일 때에는 UI 단에서 나타나도록 설정할 수 있지 않을까?

slice 파일에서 초기값의 형태를 변경하고, pending에 대한 case를 추가했다. 컴포넌트에서는 useEffect를 통해 화면이 렌더링되자마자 thunk 함수를 호출하도록 설정했다.

화면을 띄우는 순간 useEffect를 통해 thunk 함수가 호출되고, pending에 대한 case를 처리하게 되는데, 이때 requestStatus가 pending이면 초기값 loading을 true로 변환한다. 컴포넌트에서는 loading이 true이면 '로딩중'이라는 문구가 나타나도록 설정했다.

별거 아닌 과정이었는데 꽤 오래 걸렸다. 초기값의 형태를 객체로 변환하면서 fulfilled일 때 state.push를 state.todo.push로 변경했어야 했는데 이 부분을 놓쳤다. fulfilled일 때는 loading에 대한 설정을 하지 않았기에, 계속해서 로딩 화면이 나오게 된다. 위 캡쳐본의 콘솔을 보면 loading data가 true로 잘 변환되었음을 확인할 수 있다.

spinner는 공통적으로 사용될 컴포넌트이기에 src의 commons 파일 내부에 컴포넌트 파일로 분리했다. keyframes는 별도의 파일로 분리해야 한다. if 문 내에 해당 컴포넌트를 적용하면, 위와 같이 loading spinner가 동작하게 된다.

Add Todo Area & Delete Btn 🟣

추가된 Todo를 보여주는 영역에 대한 컴포넌트를 생성했다. 가장 먼저 useSelector를 통해 todo에 대한 상태를 가져왔다. 해당 todo는 value와 id라는 key로 구성된 객체의 집합(=배열)이다. 따라서 todo의 isDone 속성에 접근하기 위해서는 'todo객체.value.isDone'의 단계를 거쳐야 한다.

위 접근을 통해 '완료되지 않은 항목'을 noCompleteArray라는 변수에 할당했다. todo카드에서의 elem은 결국 todo를 의미한다. 동일한 매커니즘으로 title을 렌더링한다. 그런데 콘솔에서 todo에는 해당 data가 담기는데, noCompleteArray는 반영되지 않는 문제가 발생했다. Add Click에서 inputValue를 초기화할 때 isDone과 id에 대한 내용을 반영해주지 않아서 발생한 문제였다.

아니다 id는 add를 click할 때 보내주면 되는 것이다.

다시 페이지 구분 먼저 🟣

시험기간 이슈로 잠정 중단했었다. 다시 차근차근 시작한다.

Delete button을 마지막으로 구현한 것 같은데, 사실은 상세 페이지에서 삭제 작업을 하도록 만드는 것이 목표였다.

메인 페이지에서 title을 클릭해서 상세 페이지로 이동하게 하려면, title에 대해 onClick event가 필요하고 해당 event는 navigate에 대한 내용을 담고 있어야 한다. 그리고 main과 detail로 구분해서 주소를 부여하고자 했다.

가장 먼저 input field와 todo field, 두 컴포넌트를 main으로 묶어줬다.

파일이 알 수 없는 이유로 작동하지 않는다. 삭제하고 다시 시작한다.