[Legacy][React] state를 사용한 To Do List, 동적 테이블

[React] state를 사용한 To Do List, 동적 테이블

그 다음 게시글로 useRef에 대해 알아보려고 하다가, 바로 넘어가는 것보다는 해당 개념에 대해 조금이라도 더 이해할 수 있도록 간단한 프로젝트를 진행해보려고 한다. 많은 입문자들이 구현하는 할 일 리스트, To Do List를 구현해볼 것이다. 기능은 아주 간단한게 할 일이 없는 경우는 없다는 메시지, 할 일 리스트에서는 추가, 삭제 기능을 구현할 것이다. 아주 간단한 동적 테이블을 구현한다고 생각해도 좋다. 프로젝트 전체 코드는 이 링크를 클릭하여 다운 받을 수 있도록 하자.

To Do List

우선 완성된 이미지부터 확인해보자.

아주 간단하게 수행률과 할 일 리스트로 화면이 구성되어 있다. (기본적인 레이아웃 구조, css는 설명하지 않고 패스한다.)

13 ~ 24번째 라인에 있는 코드를 보면, 즉시 실행 함수로 수행률을 구해주었다. 매번 이렇게 즉시 실행 함수를 이용하는 것보다 더 좋은 방법이 많이 있을 것이다. 고민하고 변경하도록 해보자.

이전 시간에 배운 setState를 사용하는 구문이다. 28 ~ 35번째 라인을 확인해보자. setRows에서 prev를 이용하여 이전 배열에 새로운 객체를 이어 붙여준다. concat 함수는 새로운 배열을 반환하기 때문에 렌더링이 일어나게 된다. 여기서 새로운 배열을 반환한다라는 것이 중요하다는 것을 알아야 하는데 스스로 생각해보자. 새로운 배열이 아니라 기존 배열에 1개를 넣으면 어떻게 되는지도 할 수 있으면 해보자. (이후 더 자세한 것은 시간이 나면 따로 게시글을 적도록 하겠다.)

37, 39번째 라인에서 rows 배열의 길이에 따라 컴포넌트를 mount 시켜주었다. 사실 전부 mount 시켜두고 상황에 따라 display: "none"을 사용해도 되지만 뭐가 더 좋은 방법인지는 잘 모르겠다. 상황에 따라서 다를 것 같다는 생각이 든다.

나머지 부분도 설명할 것이 딱히 없어보인다. 위에 내용들을 다시 말하는 듯한 코드들 밖에 없는 것 같다. setRows에서 concat을 사용한 것을 이해했다면, 나머지 코드들은 쉽게 이해할 수 있을 것이라고 생각한다.

정리

이 간단한 프로젝트에서 말하고자 하는 것은 state만을 사용해서도 이런 To Do List를 구현할 수 있다는 것을 보여주고 싶었고, 이만큼 state가 중요하다는 것을 보여주고 싶었다. 진짜 state만 제대로 이해하고 사용할 줄 알아도 앞으로 리액트를 공부할 때, 많은 도움이 될 것이라고 생각한다.

마지막

해당 내용은 틀릴 수도 있다는 것을 감안하여 봐주세요. 틀린 내용 및 오탈자 수정 요청 환영입니다.