몇시부터 몇시까지 입력받는 드롭다운 만들기

사이드 프로젝트 제작 중, 예약 가능 시간이 몇 시 부터 몇 시 사이에 예약이 가능한 목록을 보여주려고 다음과 같이 구현하였다.

 

그냥 시간을 두개 받아도 되지만, 만약 내가 10시부터를 선택하면 뒤는 11시부터 나머지 시간이 보였으면 해서 구현하게 되었다.

 

다음은 실제 프로젝트에 적용하기 전 간단하게 test로 구현해본 코드이다.

 

import React, { useState, useEffect } from "react";

const TimeSelector = () => {
  const [firstTime, setFirstTime] = useState(0);
  const [secondTime, setSecondTime] = useState(0);
  const [timeOptions, setTimeOptions] = useState<number[]>([]);


  useEffect(() => {
    setTimeOptions(generateOptions(firstTime));
  }, [firstTime]);


  const generateOptions = (start: number) => {
    const options: number[] = [];
    for (let i = start + 1; i <= 24; i++) {
      options.push(i);
    }
    return options;
  };

  return (
    <div>
      <select value={firstTime} onChange={(e) => setFirstTime(+e.target.value)}>
        {Array.from({ length: 24 }, (_, i) => (
          <option key={i} value={i}>
            {i}
          </option>
        ))}
      </select>
      <select value={secondTime} onChange={(e) => setSecondTime(+e.target.value)}>
        {timeOptions.map((time) => (
          <option key={time} value={time}>
            {time}
          </option>
        ))}
      </select>
    </div>
  );
};

export default TimeSelector;

 

작동 원리는 다음과 같다.

 

1. 먼저 select 사이에 Array객체를 이용하여 길이가 24인 유사배열객체를 만든다. Array의 from메서드를 이용하여 만드는데, 여기서 Array.from()은 유사배열객체 라고 부르며 유사배열객체란 실제 배열은 아니지만 length속성을 가지고 있으며, 키값이 인덱스값이고, push등 배열에서 사용하는 메서드는 사용할 수 없는 객체이다.

 

Array.from()의 첫번째 인자는 배열을 만들 객체를 넣고, 두번째 인자는 배열의 map메서드와 동일하다고 보면 된다.

 

따라서 위 코드로 보면 길이가 24인 배열을 만들고, 해당 배열의 인덱스 번호를 value로 갖는 option을 만든 것이다.

 

2. 그 다음, 위에서 만든 select는 0~23을 가진 드롭다운 형태인데, 만약 여기서 숫자 10을 선택하면 그 다음 선택할 select는 11부터 나오도록 해야 하기 때문에 generateOptions라는 함수를 만들어서 구현했다.

 

첫번째 select가 선택되면 두번째 드롭다운의 목록이 정해져야 하기 때문에 useEffect 안에 함수를 넣어 구현했고, 디펜던시에 첫번째 선택한 select 상태를 넣었다.

 

generateOptions 함수는 첫번째 select의 onChange값을 받아서 그 값부터 24까지의 숫자를 갖는 배열을 만드는 함수이다.

 

마치며

사실 너무 간단한 기능이라 혹시 html 자체에 이런 기능이 없을까? 하고 5분정도 검색하다가.. 차라리 만드는게 더욱 빠르겠다는 생각에 구현해봤다. 

 

간혹 이러한 간단한 기능들과 간단한줄 알았지만 간단하지 않았던 기능들을 만들면서 해내면 뿌듯함은 있지만, 알고보니 같은 기능의 메서드가 존재했던 경우들도 있었다. 경험과 공부량이 부족한 탓이지만, 굳이 직접 모든걸 구현하려고 애쓰는 것보다 잘 검색해보고 원리를 잘 이해하여 내가 잘 이용할 수 있는게 더 중요한 것 같다고 느낀다.