to do list를 만들면서 한 고민들

1. 데이터와 상태 다루기

처음에는 더미 데이터로 화면을 만들고, 기본적인 CRUD 기능을 어설프게나마 구현을 했다. 그다음 더미 데이터를 json-server로 바꿔서 axios로 fetch하는 걸로 코드를 수정했다. 그러다보니 처음에 더미 데이터를 가지고 기능을 만들 때는 전체 to do 데이터를 하나의 상태로 관리했었는데, 이 부분을 서버와 데이터를 주고 받는 걸로 바꿔야했다. 그 과정에서 fetch로 요청을 할 때마다 페이지 새로고침을 해주지 않으면 갱신된 데이터가 화면에 반영이 되지 않았다. crud 요청이 있을 때마다 window.location.reload() 로 새로고침을 해주자니 매번 모든 컴포넌트들이 새로 리렌더링이 되면서 화면이 번쩍거리는 게 사용자 관점에서 요란스럽게 느껴졌다. 특히 할일을 다 했는지 complete 여부와 중요한 task인지 여부를 boolean 값으로 데이터 관리를 하고 있어서 화면에서 체크 박스에 체크할 때마다, 중요 표시를 하는 별표를 누를 때마다 화면이 새로 렌더링된다는 건 결코 유쾌한 사용자 경험이라고 볼 수 없었다.

그래서 처음 화면을 불러올 때 useEffect로 get 요청을 해서 데이터를 받아올 때, 전체 데이터를 하나의 상태로 관리를 하면서 새로운 데이터를 생성해서 post 요청을 보낼 때에만 제이슨 서버가 만들어주는 id를 받아온 데이터를 반영하기 위해 새로고침을 하고, 그외에 각종 갱신된 데이터(to do text 수정을 포함해 중요 여부와 이행 여부)를 patch 요청을 보내거나 delete 요청을 보낼 때는 서버에 업데이트된 데이터를 보냄과 동시에 상태로 관리하는 전체 데이터에도 바뀐 데이터를 똑같이 반영해주는 중복 코드를 작성했다. 이렇게 하니 리액트 특유의 바뀐 ui만 찾아내서 샥- 바꿔주는 효과를 톡톡히 누릴 수 있었다.

서버의 데이터와 상태값을 중복으로 관리하는 게 올바른 방식인지는 여전히 의문이다. 최선의 방식이 있다면 무엇일지 궁금하다.


2. 수정 기능은 어렵다 (feat. input 요소 까다로워)

한 달 전 처음으로 to do 앱 과제를 받은 날 피그마로 와이어프레임을 만드는 단계를 과감히 건너뛸 수 있었던 건 개인적으로 사용하고 있는 to do 서비스를 클론하기로 정했기 때문이었다. 마이크로소프트 to do 웹페이지를 개발자 도구로 살펴가며 내가 만들 수 있는 화면으로 정리만 한 다음 곧장 전체 레이아웃 코드를 작성하고 컴포넌트를 만들었다. 기획 단계에서 시간을 아낀 덕에 당일에 더미 데이터를 가지고 수정(U) 기능과 사이드바를 제외하고 CRUD의 기본 기능을 다 구현할 수 있었다.

화면 및 데이터 구성안

그다음 몇날며칠을 쭉 묵혀두다가 지난주 평일 저녁 하루와 주말 동안 다음과 같은 작업들을 해나갔다.
- 사이드바 라우팅
- props로 조건부 스타일링을 하기 위해 주요 컴포넌트 styled-components로 리팩토링
- 수정 기능 구현

이중에 수정 기능에만 만 하루 이상을 매달렸던 것 같다. 처음에는 useRef로 요소를 직접 조작하는 방식으로 코드를 작성했고, 어영부영 돌아는 가지만 예기치 않은 사용자 조작시 버그가 제법 있는 상태여서 오늘 오전오후 내내 수정 기능을 가다듬었다. 수정 버튼을 누르면 text가 있는 그 자리에서 바로 수정을 할 수 있게 하고 싶어서 처음에는 <p> 태그 안에서 텍스트를 보여주다가 수정 버튼을 눌러서 editable 상태가 되면 <p> 태그를 가리고 그 자리에 그대로 <input> 태그를 갈아끼우는 방식으로 코드를 작성했다. 그러면서 온갖 수난을 겪었는데... 이건 따로 한 번 정리를 해야한다. 🥲 그러다 친구가 p 태그와 input 태그를 조건부로 보여주지 말고 처음부터 input 태그만 놓고 disabled 속성을 제어해서 수정할 수 있는 상태를 만드는 방법도 있다고 알려주었다. input도 어려운데 textarea 요소는 더 어렵다... form을 잘 다루기란 무척 어려운 일 같다.

구현 화면

3. 총평

학습 4달, 프로젝트 2달 총 6개월 과정의 부트캠프에서 지금 내가 뭘 배우고 있는 건지, 이게 내 것이 되고 있는 것인지 안개낀 듯한 학습 과정 마지막 달을 보내다 그래도 이렇게 내가 원하는 화면과 기능 작동을 위해 리액트와 스타일 컴포넌트를 이리저리 만져보니 어렴풋하던 것들이 조금 더 명확해지는 시간을 가질 수 있었다. 3개월 전, 첫 솔로 과제였던 바닐라 js로 my agora states를 만들었던 때를 생각해보면 그래도 많이 걸어왔다.

앞으로 두 번의 프로젝트로 얼만큼 더 나아갈 수 있을지 두려운 마음과 기대하는 마음이 동시에 든다.


📍 github repo: https://github.com/Ah-ae/fe-sprint-my-todo