[react/실습] 올림픽 메달 업데이트 사이트

'올림픽 메달 사이트 만들기'과제로 리액트 입문하기

GitHub 바로가기

 

 

---

       과제 개요 

올림픽의 메달 순위를 업데이트 하여, 각 국가별 금, 은, 동, 그리고 총 메달 수를 확인할 수 있는 페이지이다.

사용자는 필터 옵션을 통해 메달 종류나 총 메달 수에 따라 국가 순위를 정렬할 수 있다.

• 나라와 메달 개수 입력하고 버튼을 클릭해 하단 리스트에 정보 추가 혹은 업데이트
• 정렬 옵션 선택으로 리스트 재정렬
• delete 버튼으로 리스트 삭제

 

리액트 구조를 이해하고 state나 props를 적용하기까지가 좀 시간이 걸렸고, 그 외는 할만했던 거 같다!

 

 

---

       컴포넌트 구성 

App
├── Form
│   ├── Country
│   ├── Medal
│   └── Btn
└── List
    └──DeleteData

디자인 요소에 따라 한번 크게 나누고, state를 사용해야 하는 부분에 따라 나눠줬다.

 

 

---

 

       프로젝트 설명 

State

React의 useState를 활용하여 실시간으로 정보가 변환되도록 했다.

• Add Country 버튼으로 나라의 정보를 곧바로 추가할 수 있다.

• Update 버튼으로 이미 리스트에 존재하는 나라의 메달 수를 추가할 수 있다.

• delete 버튼으로 리스트의 정보를 삭제할 수 있다.

• sort를 사용하여 원하는 기준으로 나라를 정렬해 확인할 수 있다.

 

 

Local Storage

Local Storage를 활용하여 새로고침 해도 정보가 유지되도록 했다.

• 브라우저 종료 후 재접속 해도 이전에 업데이트 했던 리스트를 확인할 수 있다.

 

 

---

       과정💦 

아무래도 react는 처음 접해봐서,

강의를 듣긴 했지만 큰 구조나 맥락을 이해하는 데 가장 시간을 많이 쓴 것 같다.

컴포넌트를 어떻게 나눌 것인지,

컴포넌트간 데이터는 어떻게 주고받을 것이며 그럼 useState는 어디에 써줘야 하는지..

오류 100번 내면서 알아냈다.

그래도 구조 파악은 제대로 한 것 같아서 만족 (아마도)

 

 

 

---

       새로운 개념 정리 

과제하면서 초반에 state나 부모 자식 상속(props)가 어려웠는데,

그부분을 정리한 링크는 아래 첨부하겠다.

리액트 시작하기

useState로 상속 알아보기

 

추가로 중간에 계속 오류가 떠서 튜터님께 가 여쭤보며 알게된 것

react에서 반복문을 사용할 땐, html 요소 안에 key값을 지정해 줘야 한다는 거!

반복문{ //.map 등
    <div
        key='unique value'
    >
}

 

 

---

항상 새로운 걸 시작할 땐 전체적인 맥락 파악이 제일 중요하고 어려운 것 같다.

다행인 건 맥락 파악이 된 후 자바스크립트나 html 문법으로 다 해결 가능했다는 거!

왜 react를 배우기 전 javaScript나 html, css를 배우고 들어갔어야 했는지 알겠고,

그동안 공부했던 걸 써먹을 수 있어서 더 좋았다.