『2023.03.09』- 조건부 렌더링으로 대기질영역 구현.

👇👇👇 이전글 👇👇👇

『 2023.03.08』 - 오류 수정 및 지도 영역 수정

 

✎ 오늘의 할 일!

 

1. 조건부 렌더링을 사용한 미세먼지 영역 설정하기

2. 조건문을 사용한 js파일 만들기

 

어제의 약속처럼 오늘 아침부터 조건부 렌더링에 대해서 알아보았다.
 

리액트 공식문서의 조건부 렌더링

조건부 렌더링에서도 여러 방법이 있었는데 지금의 내가 구현해야 하는 영역은 몇 가지의 유의점이 있었다.
 
1. 조건이 여러 개이다.
2. 조건에 따라 보이는 아이콘이 달라야 한다.
 
그래서 처음엔 삼향연산자나 if문에 대해서 선택을 하려 했으나 조건이 여러 개가 달려야 하기 때문에 코드의 가독성이 떨어질 것 같았다. 또한 swich문도 또한 가독성이 떨어지고 유지보수에 문제가 될 것을 우려되었다. 
 
결국 선택한 방법은....
 
바로 object로 처리하는 방법!

그러면 조건에 따라 각각의 컴포넌트를 보이는 것으로 처리하기로 했다!
 
보일 각각의 컴포넌트로 작성했다!

D1은 미세먼지다.

그리하여 보이는 화면이다!!
 
아래는 각각의 조건 ( '매우 좋음', '보통' , '나쁨', '매우 나쁨')으로 해둔 상태이다!
 

오늘의 작업은 여기가 끝이다.
 
지금까지의 진행사항은 이 정도인데 진짜 이번에 느끼는 점이지만...
 
정말 그냥 퍼블리싱과는 정말 다르고 파일의 양도 어마어마하다는 점!
 
근데 컴포넌트를 만들고 연결하고 하는 점이 재미있다... 

많다 많어

 

✎ 다음의 할 일!
 
1. 하단 기준표 만들기.
2. 미세먼지 영역 css 다듬기.

---

오늘 일지 끝!
◝(・▿・)◜