[React] 예약페이지 시간 선택

대실 예약 페이지를 구현할때 시간을 선택하는 기능을 만들었다.

필요한 기능과 조건은 다음과 같았다.
1. 선택된 시간 블럭이 없을 경우 클릭한 블럭부터 네개의 블럭이 선택될 것.
2. 이미 선택된 블럭을 클릭했을 경우 그 블럭부터 마지막 블럭까지 삭제할 것.
3. 단, 그 블럭이 첫번째 요소일 경우 그 요소만 삭제할 것.

그렇게 작성한 코드는 다음과 같다.

  const times = Array(9)
    .fill()
    .map((_, index) => {
      return 12 + index + ":00";
    }); // "12:00" ~ "20:00"이 담긴 배열 생성

  const handleSelectTime = time => {
    if (selectedTimes.length === 0) { // 선택된 시간이 없을 경우
      const indexOfTime = times.indexOf(time);
      const sliced = [...times].splice(indexOfTime, 4); // times 배열에서 선택한 요소부터 네개만 담은 배열
      setSelectedTimes(sliced);
    } else { // 선택된 시간이 있을 경우
      const indexOfSelected = selectedTimes.indexOf(time);
      if (indexOfSelected === 0) {
        setSelectedTimes(selected => [...selected].filter(el => el !== time)); //첫 번째 요소를 클릭했을 경우 그 요소만 삭제
      } else if (indexOfSelected !== -1) { // 선택된 요소중 하나를 클릭했을 경우
        const selected = [...selectedTimes];
        selected.splice(indexOfSelected, 3); // 선택된 요소 부터 마지막 요소까지 삭제
        setSelectedTimes(selected);
      }
    }
  };

그리고 각 요소가 자신의 선택여부를 .find() 메소드를 사용하여 boolean 타입의 props로 스타일드 컴포넌트에 전달해 색상이 변경되도록 구현하였다.