[React] React mini project2 - travel-list

◇ 프로젝트 이름

• Travel List

◇ Tech

• HTML&CSS
• React

◇ 프로젝트 설명

• 이 여행 품목 관리 프로젝트는 여행에 필요한 물품을 간편하게 입력하고 체크할 수 있도록 구성했다.
• 전체 프로젝트는 Logo, Form, Packinglist, Item, State 총 5개의 컴포넌트로 세분화되어 있어 재사용성을 높이고 코드의 가독성을 향상하는 데 주력했다.
• Form 컴포넌트에서는 품목과 해당 품목의 개수를 입력하고 선택할 수 있는 기능을 제공하여 사용자가 손쉽게 정보를 제출할 수 있도록 구현했다.
• Packinglist 컴포넌트에서는 Form에서 입력받은 정보들을 목록 형태로 화면에 출력하며, 이를 더 가독성 있게 표현하기 위해 Item 컴포넌트를 도입했다. 또한 정렬 기능을 추가하여 사용자가 원하는 방식으로 목록을 정리할 수 있도록 했다. 더불어, 전체 목록을 한 번에 삭제할 수 있는 기능도 구현했다.  
• State 컴포넌트는 하단에 메시지를 남길 수 있는 영역으로, 프로젝트의 현재 상태를 간결하게 표현하도록 구성했다.
• props, state를 적절히 활용하여 데이터의 전달, 수정, 삭제 등을 효율적으로 관리했다. 

 

초기 화면

3개의 품목을 입력했을 때 하단 메시지 변화

 

[왼]품목을 기준으로 정렬 / [중]입력 순으로 정렬 / [오]packed상태로 정렬

 

물품 리스트를 모두 packed 상태로 만들었을 때 하단 메시지 변화

 

clear list 버튼을 눌렀을 때 뜨는 경고창 메시지, 확인 버튼을 누르면 초기화

 

초기 화면

 

Form

입력값을 입력하고 제출할 때 하나의 품목에 quantity, description, packed, id 로 이루어진 객체가 만들어진다.

 

Form

1부터 20까지의 수를 option태그로 수동으로 만들지 않고 배열 메서드를 사용해 코드의 중복을 줄였다.

 

PackingList

입력받은 품목들은 items리스트에 저장되는데 사용자에게 3가지의 정렬 상태를 제공하기 위해

만든 코드이다. 원본을 해치지 않기 위해 slice()메서드를 사용하여

리스트 복사본을 만들어 원본을 보존한채 정렬을 하였다.