버스 페이지 개발일지 - [1] 두 드롭다운의 상호작용

후에 포트폴리오 작성에 도움이 될 수 있도록 제작한 것들을 정리해두라는 선배님의 조언에 개발일지를 작성해두기로 결정.

커뮤니티 사이트를 개발하며 새로 익힌 것들과 '이렇게 만든 이유'를 정리해두려고 한다.

드롭다운에 포함되는 콘텐츠는 세가지로, ["한기대", "야우리", "천안역"]이 반복되는 구조이다.

길이 3의 두 개의 배열을 사용해 출발지와 목적지를 잡아두고, 인덱스0의 값을 대표로 표시하게 두었다.

두 배열의 0번째 값이 서로 같으면 안되므로 한쪽을 골랐을 때 나머지 반대쪽도 바뀌는 경우가 필요할 때가 있다.

그렇기에 3개의 경우로 나눈 switch문을 사용했고,

인자로 넣은 값을 0번째 값으로 만들고, 나머지 두 값을 맞춰주는 콜백함수를 만들어

출발지를 선택할 때 / 출발지를 선택했는데 도착지와 겹칠 때 / 도착지를 선택할 때 / 도착지를 선택했는데 출발지와 겹칠 때를 각각 콜백함수를 호출했다.

function switchDropDown(target, setFunction) {
    switch (target) {
      case "한기대": {
        setFunction(["한기대","야우리","천안역"]);
        break;
      }
      case "야우리": {
        setFunction(["야우리","한기대","천안역"]);
        break;
      }
      case "천안역": {
        setFunction(["천안역","한기대","야우리"]);
        break;
      }
    }
  }

  const selectDepart = (depart) => {
    if(depart === arrivalList[0]){
      switchDropDown(departList[0],setArrivalList)
    }
    switchDropDown(depart,setDepartList)
  };

  const selectArrival = (arrival) => {
    console.log(timetable["한기대야우리"]);
    if(arrival === departList[0]){
      switchDropDown(arrivalList[0],setDepartList)
    }
    switchDropDown(arrival,setArrivalList)
  };

그 결과 함수의 길이를 크게 줄일 수 있었고, 기존의 flag를 두 번째 인자로 주며 무한호출을 방지한 방법보다 코드가 간결해졌다고 생각한다.