Todo List 만들기

리액트의 props, state, setState훅 등을 활용하여 My Todo List를 만들자

컴포넌트 분리

1. header 페이지의 header는 공통적으로 재사용될 수 있다고 생각하여 컴포넌트로 따로 분리하였습니다.
2. AddTodo 사용자가 제목과 내용을 입력하는 부분인데, 가독성과, 다른 페이지에서 재사용될 수 있다고 생각하여 분리하였습니다.
3. TodoBox 사용자가 입력한 todo 카드들을 props의 상태에 따라 다른 위치에 렌더링 해주는 박스입니다. 재사용과 가독성을 위해 분리하였습니다.
4. Todo 사용자가 입력한 정보들을 보여주는 카드 입니다. 재사용과 가독성을 위해 분리하였습니다.
5. 사용하는 버튼들이 많아 버튼의 스타일과 이름등을 데이터로 주고받아 사용하기 위한 컴포넌트입니다. 재사용과 가독성을 위해 분리하였습니다.

과제중 시행착오, 진행과정

과제에 주어진 View를 보고 전체적인 스케치를 해야겠다고 생각. 전체 Layout을 바탕으로 컴포넌트 별로 나눔(기능전 html과 css부분만) 이제 컴포넌트 별로 각기능을 알맞게 추가하고 props, state 개념과 useState를 이용해보자! 했는데, React강의 에서는 App.js 파일 한곳에 모든 코드를 작성하고, component를 떼어내는 식으로 경험을 했었는데, 컴포넌트를 먼저 분리하고 작업을 하려니 props로 어떻게 어디서 누구한테 데이터를 보내줘야하며, 어떤 상태를 관리해야하는지 어려움이 많았다. 일단 보여지는 부분은 만들어놨으니 다시 한번 강의를 보면서 App.js 한 파일에 기능들을 추가하였고 한페이지 안에서 기능구현이 다가능한 상태가 되니, 컴포넌트를 분리 할 수 있었다.

완료와 취소 기능을 구현함에 있어서 todos안에 있는 isDone 값을 변경하여 렌더링을 시켰어야 했는데, isDone의 상태를 따로 관리를 해줘야한다고 생각했고, 위와 같이 코드를 작성한결과 작동하는데 문제는 없었지만, 클릭을 2번해야 원하는 기능이 작동되는 문제가 발생했다. 결론적으로 isDone의 상태를 따로 관리할 필요가 없었으며, todos안의 요소 isDone과 따로 상태관리를 위해 선언한 isDone 객체는 다른 데이터였고,

이 상황을 해결하는 과정에서 크게 3가지를 알게 되었다.

첫번째로, setState는 비동기적으로 일어난다. 두번째로, setState 상태변경은 바로 일어나지 않는다.(React가 브라우저 이벤트가 끝날 시점에 state를 일괄적으로 업데이트하기 때문에) 다음스텝을 생각해서 코드를 작성해보자. 세번째로, 상태관리는 꼭 해야하는 것들만 하자.