[6주차] 리액트입문: 개인과제 todolist 만들기

• JSX 문법이란 무엇일까요?

자바스크립트에 XML을 추가하여 확장한 문법으로, html 태그와 같은 마크업을 자바스크립트 안에 넣어 UI 작업을 편하게 해준다.  리액트환경에서 개발할 때 쓰인다. 유의할 점은 항상 부모 요소가 하나가 감싸는 형태어야 한다.

• 사용자가 입력하는 값, 또는 이미 입력된 값, 투두의 타이들과 같은 애플리케이션의 상태를 관리하기 위해 리액트의 어떤 기능을 사용하셨나요?

사용자의 입력 값, 투두의 타이틀이나 내용 등의 애플리케이션의 상태를 관리하기 위해 useState 기능을 썼다.

• 애플리케이션의 상태 값들을 컴포넌트 간 어떤 방식으로 공유하셨나요?

총 두가지의 방법을 사용했는데,
첫번째로는 Props 방식을 통해 부모 컴포넌트의 데이터값을 자식 컴포넌트의 전달하는 데 이용했다.
두번째로는 Children 방식을 통해 주로 layout 과 같은 변하지 않는 값과 변하는 값을 구분할 때 이용했다.

• 기능 구현을 위해 불변성 유지가 필요한 부분이 있었다면 하나만 설명해 주세요.

카드를 추가하는 기능을 만들 때, ToDoLists의 setToDoLists값을 기존 배열의 값을 직접 변경하여 출력한다면(메모리 주소는 동일) 리액트에서는 그것을 state가 변했다고 인식하지 않아 리렌더링이 일어나지 않는다. 따라서 spreadOperator을 활용한 새로운 객체 선언을 통해 setToDoLists값을 설정해주거나,  map 과 같은 새로운 배열을 반환하는 순수함수를 사용하였다.

• 반복되는 컴포넌트를 파악하고 재사용할 수 있는 컴포넌트로 분리해 보셨나요? 그렇다면 어떠한 이점이 있었나요?

List라는 컴포넌트를 만들었는데, 이 List는 카드리스트를 나열할 수 있는 공간 컴포넌트이다. 따라서 isDone 이라는 객체 key의 값이 true 혹은 false 이냐에 따라서 나뉘어지는 working 카드와 done 카드를 동일하게 나열할 수 있는 공간 컴포넌트에 넣어 사용할 수 있어 코드 중복에 의한 코드 길이의 길어짐을 개선할 수 있었다.

CardWorking 과 CardDone 도 isDone의 값에 따라 만들어지는 카드 컴포넌트인데, 카드의 틀을 만들어주고 사용자 입력값에 따라 데이터만 갈아 끼워지며 화면에 렌더링 될 수 있도록 만들어서 코드 길이의 길어짐을 개선할 수 있었다.

 

 

Github

GitHub - dancinncoder/Todo-List-React-: Todo List

 

deployed Website

https://todo-list-react-apgs5e29l-hamin-lees-projects.vercel.app/