[12월 1주차] 리액트로 Todo 리스트 페이지 만들어보기 (feat. 항해99 3주차 주특기 입문 주차)

이번주는 항해에서 주특기 입문 주차였다. 나의 주특기인 리액트로 간단한 Todo 리스트를 작성할 수 있는 페이지를 만드는 것이 과제였다. 제목과 내용을 등록하면 진행중인 todo 리스트에 등록되고 완료버튼을 누르면 완료된 리스트에 추가가 된다. 반대로 완료된 리스트에 있는 todo게시물의 취소버튼을 누르면 다시 진행중인 todo로 바뀌게 된다. 삭제를 누르면 해당 todo 게시물이 삭제된다. 

 

Vercel을 통해 배포까지 진행하였다.

React App

이번 과제로 기본적인 리액트 개념인 state, props, 리렌더링에 대해 배우게 되었다. 리액트는 SPA 방식으로 MPA와 다르게 가상돔을 사용하여 변경된 부분만 따로 요청하는 방식이다. 그렇다보니 useState를 통해 만든 state가 변경된거나, 부모 컴포넌트에서 전달되는 props가 달라지면 리렌더링이 일어나는 것이다.

 

그런데 여기서 한가지 드는 의문이 왜 원본인 state를 직접 수정하면 바뀌지 않고 setState와 같은 함수를 통해 바꿔야만 렌더링이 발생하는 지 궁금했다. 이에 대한 답은 리액트는 가상돔을 사용해서 변경된 부분을 체크하는데, 주어진 함수를 통해 바꾸거나 복사를 한 뒤 수정하여 복사본을 할당하지 않으면, 참조하는 껍데기 주소는 똑같기 때문에 똑같은 주소만 보고 이것이 변경되었다고 인식을 못하는 것이었다. 그러므로 무조건적으로 주어진 함수를 사용하거나 복사본을 사용함으로써 리액트의 장점인 자동 리렌더링을 꼭 사용해야한다는 것이다.

 

또 한가지 의문이었던 점은 리액트는 SPA라고 하지 않았나? 그런데 route에 대해 배워보면서 새로운 url을 리액트를 통해 만드는 것을 보고 마치 새로운 페이지를 만드는 것 같은 느낌이 들었다. 그래서 페이지를 여러개 만드는 것 아닌가 하는 의문이 들었는데, 알고보니 그게 아니었다. 그냥 url만 새롭게 생성하는 것이고 리액는 자체적으로는 html 파일이 하나밖에 존재하지 않는다. 특정 url에 대해 특정 화면을 보여주도록 만드는 것일 뿐 html 파일은 하나밖에 없으므로 Single Page Application이 맞는 것이었다.

 

이번주의 목표는 똑같은 과제 코드들을 리팩토링하여 가독성있게 컴포넌트들을 분리하여 코딩하는 것을 연습해보는 것이다.