POOL:US ) 타임테이블(filter, map)

1. json 형태로 축제 일정을 저장해놓고,
2. filter로 조건에 맞는 일정을 분류한 뒤
3. map함수를 이용해 렌더링

filter : 이터레이터(반복 가능한 객체)의 요소들 중에서 조건에 만족하는 요소들로 구성된 새로운 이터레이터를 반환하는 함수.

map : 이터레이터의 각 요소에 대해 함수를 적용한 결과로 구성된 새로운 이터레이터 반환, 반복적인 작업을 효율적으로 수행할 수 있는 함수

축제가 공연 / 부스로 나뉘어져 있었고, 30일, 31일로 이틀 진행되었기 때문에
1. day로 날짜를 구분하고
2. booth / stage 구분해서 각 조건에 맞는 데이터를 불러오도록 했다.

json 형태는 이런식으로 day, type을 저장함.

{
        "id": 12,
        "day": 30,
        "type": "stage",
        "time": "20:30 - 23:00",
        "title": "아티스트 공연",
        "place": "기념관 앞 운동장",
        "sub": "축제의 하이라이트인 아티스트 공연!",
        "color": "greencolor"
    },
    {
        "id": 13,
        "day": 30,
        "type": "stage",
        "time": "23:00 ~",
        "title": "폐막식",
        "place": "기념관 앞 운동장",
        "sub": "2023 영암 축전 POOL:US의 화려한 끝을 장식할 폐막식!"
    },
    {
        "id": 14,
        "day": 31,
        "type": "stage",
        "time": "12:00 - 13:00",
        "title": "가든 아일랜드 홍보",
        "place": "기념관 앞 운동장",
        "sub": "숲속의 작은 쉼터, GARDEN ISLAND! 가든 아일랜드의 홍보영상이 시작됩니다."
    },

그리고 이 값들을 사용하기 위해서 사용할 js 파일에

import Time from './TimeTable.json'; 

요렇게 임포트를 해주고

부스 렌더링

{Time.filter(item => item.day === day && item.type === "booth").map((item) =>
	<div className="boothBox">
	    <div>{item.time !== "" ? (
	    <div>
	        <span>{item.time}</span>
	        <img className="blueCircle" src="img/blueCircle.png" alt="" />
	    </div>) : null}</div>
	    <div>{item.title}</div>
	    <div>{item.place} <MdPlace /></div>
	</div>)}

1. Time에 모든 json 값이 들어있고
2. filter 함수로 json 값에서 day가 30 or 31과 일치하고, type이 booth인 객체만 다시 반환. (item.day는 json에 들어있는 값, day는 30 or 31 아래서 설명할거임)
3. 조건에 맞는 새로운 객체가 만들어졌으니 그 객체를 그대로 map으로 렌더링
4. html 요소로 값이 들어가야할 곳에 알맞은 데이터를 넣어줌. (시간, 제목, 장소 등)

이 부분은 json에서 time이 비었으면 빈 값 그대로 두고 비어있지 않으면 "시간과 파랑동그라미 이미지"를 띄워주기 위해 넣은 것

<div>{item.time !== "" ? (
	    <div>
	        <span>{item.time}</span>
	        <img className="blueCircle" src="img/blueCircle.png" alt="" />
	    </div>) : null}
 </div>

이런식으로 시간이 없으면 '시간, 파란동그라미 이미지' 없도록 (로맨틱 아일랜드 부분)

공연 렌더링

{Time.filter(item => item.day === day && item.type === "stage").map((item) => 
      <div className="stageBox">
		      <div>{item.time !== "" ? (
		          <div>
		              <span>{item.time}</span>
		              <img className="greenCircle" src="img/greenCircle.png" alt="" />
		          </div>) : null}</div>
		          <button
		                  className="TTbtn TTbtn-no-shadow"
		                  ref={ref => targets.current[item.id] = ref}
		                  onClick={() => toggleTooltip(item.id)}
		              >
		              <div className={`breakword TTtitle ${item.color}`}>{item.title}</div>
		              <div className="TTtime"><MdPlace /> {item.place}</div>
		          </button>
				</div>
		</div> )}

위의 부스와 동일하게 동작함!
filter 부분에서 day 구분, type==="stage"인 부분만 필터링해서 렌더링하는 것

여기서 html 안에 json에서 불러온 값들을 넣는 것이기 때문에 중괄호{}를 사용해야 한다.

렌더링한 결과! 부스와 공연이 잘 나뉘어져 있는 것을 볼 수 있다 ~

여기서 DAY1 DAY2 버튼을 누르면 날짜에 맞는 데이터가 조회되어야하는데
이건 리액트에서 사용하는 useState 훅과 관련이 있다.
그것은 다음 포스팅으로 ~