[React] 리팩토링 - 데이터/액션/계산으로 분리하고 쿼리 스트링을 사용하자

🐾들어가며

이전에 쓴 코드를 돌아보면서 리팩토링을 해보았는데, 정말 과거의 저에게 안타까운 시선이 갑니다.
리팩토링하면서 어떤 행동으로 어떻게 변화했는지 정리해보려고 합니다.

코드의 전문은 다음 링크에 올려두었습니다: https://gist.github.com/Sleepingoff/8c9494d244374292446f3f1784169c12

✨본격적으로

✅어떤 일을 하고 있을까?

먼저 해당 컴포넌트에서 어떤 기능들이 있는지 알아보았습니다.

1. user를 기준으로 시간을 초기화하고 현재 시간에 맞춰서 day 상태를 업데이트

   • holiday라는 공휴일 데이터를 토대로 공휴일이라면 한 번 더 day 상태를 체크해서 업데이트

2. 새로고침, 날짜변경, 지하철방향 변경에 따라서 값 초기화

   • rowInfo: 지하철 정보
   • count: 요청 횟수

3. 지하철 정보 가져오기

1번의 경우 정말 컴포넌트와 상관이 없는 계산 로직이었습니다.
2번의 경우 이벤트 핸들러와 여러 상태로 선언한 변수들을 개선해야 합니다.
3번의 경우 해당 컴포넌트는 페이지로 쓰이기 때문에 api 호출을 하는 책임이 있다고 생각했습니다.

그래서 일단 3번을 제외하고 1번과 2번을 집중적으로 개선하려고 합니다.

✅변수명? 선언? 변경하기

기존의 코드를 보면서 가장 심각했던 것이 변수명입니다. 무슨 뜻인지 한참을 골똘히 생각해야 겨우 기억나는 이름들 뿐이었습니다. 심지어 이를 useState로 하나하나 선언한 걸 보니 참..ㅎㅎ

기존 코드

//rowInfo: [] @description 아마 데이터 가져올 때 키값을 그대로 사용한 변수명. 지하철역정보가 담겨져 있다.
const [rowInfo, setRowInfo] = useState([]);
//reqCount: numer @description 요청횟수. 와 진짜 기억 안나..
const [reqCount, setReqCount] = useState(0);
//count: number @description reqCount가 범위라면 count는 reqCount 범위 내에서 돌아가는 숫자 왜 이딴식이지?
const [count, setCount] = useState(0);
//day: string @description 현재 요일에 대해서 평일, 토요일, 공휴일인지 숫자로 나타내서 구분
const [day, setDay] = useState(`1`);
//refresh: boolean @description 새로고침용 버튼을 위한 값. 새로고침: 남은 지하철 시간때문에 필요
const [refresh, setRefresh] = useState(false);
//direct: string @description day와 비슷. 상행, 하행, 순환 등을 숫자로 나타내서 구분
const [direct, setDirect] = useState('1');
//showTime: boolean @description 급행에 이벤트로 처리하고 있는데, 실질적으로 어떤 역할을 하는진 기억 안나..
const [showTime, setShowTime] = useState(false);

주석으로 각 state에 어떤 정보가 담기는지 적어보았는데, 굳이 상태로 선언하지 않아도 쓸 수 있는 변수들도 섞여 있었고, 정말 만들다가 만 기능에 사용하지 않아도 선언한 상태들도 있었습니다. 그래서 다음과 같이 좀 변경했습니다.

리팩토링 이후

const [count, setCount] = useState(0);
const [refresh, setRefresh] = useState(false);
const [timeTableInfo, setTimeTableInfo] = useState([]);
//에러일 경우를 처리하기 위해 state 추가
const [isError, setIsError] = useState(false);

const ONCE_REQ_LIST_COUNT = 5;
const START_INDEX = ONCE_REQ_LIST_COUNT*count;
const currentDay =  getUserSettingDay();
const currentDirect = getUserDirect();

  //button UI를 위해 추가. 현재 선택한 버튼의 variant 값을 다르게 주기 위함.
const isCurrentDay = (number) => currentDay === number + '';
const isCurrentDirect = (number) => currentDirect === number + '';
const makeClickedButton = (boolean) => boolean ? 'primary' : 'basic'

const subTimeParams = {
  startIndex: START_INDEX,
  endIndex: START_INDEX + ONCE_REQ_LIST_COUNT-1,
  stationCD: getUserStationCD(),
  day: currentDay ,
  direct: currentDirect
}

• 외부 함수로 변경: 기존에 state로 선언한 친구들은 바로 페이지에서 계산처리를 했기 때문에 그 부분을 외부 함수로 선언
• 바로 객체로 변수를 선언: state 관리가 굳이 필요없고, 렌더링할 때마다 값을 새로 할당해도 문제가 없다.
• 한번에 불러올 리스트 개수는 고정된 값이니 상수형태로 선언

✅계산 로직 외부 함수로 선언

user의 현재 시간을 알아내고, 해당 시간을 기준으로 지하철 시간표를 평일, 공휴일, 토요일 등의 기준으로 보여줘야 합니다.

기존 코드

    useEffect(()=>{
        setRowInfo([]);
        setCount(0);
    },[id])

    //TODO: 사용자 위치, 시간에 맞게 시간표 조회하기
    useEffect(()=>{
        const userDate = new Date();
        const today = userDate.getDay();// 0: 일요일 ~ 6: 토요일
        const date = userDate.getDate();
        const month = userDate.getMonth() + 1;
        const year = userDate.getFullYear();

        switch(today){
            case 6:
                setDay('2');
                break;
            case 0:
                setDay('3');
                break;
            default:
                setDay('1');
                break;
        }

        if(holiday.holiday.includes(`${year}-${month}-${date}`)){
            setDay(3);
        }
        setDirect('1');
    }, [refresh])

기존에 있던 계산 로직들 입니다. 초기화 시 실행하도록 설정했습니다.

• 필요없는 useEffect를 사용: 초기화든, 다른 버튼을 클릭해서 컴포넌트가 리렌더링되든 계산 로직은 실행돼야 합니다. 아마 여기에서 좀 오류가 나지 않았나 싶었습니다.

• 여러 분기 처리: swtich도 그렇고, if문도 그렇고 가독성이 좋지 않습니다. 심지어 day 값만 바뀌는 줄 알았더니 뜬금없이 마지막 줄에 setDirect로 direct 값도 변경하고 있습니다.

리팩토링 이후

  const initUserDay = () => {
    let INIT_USER_DAY = getUserToday();
    searchParams.set('day', INIT_USER_DAY)
  }

  //이벤트 핸들러 내부에서 setUserDay 사용
  const setUserDay = (string) => {
    searchParams.set('day', string)
  }
  const getUserSettingDay = () => {
    return searchParams.get('day')
  }
  const getUserToday = () => {
    const userDate = new Date();
    const today = userDate.getDay();// 0: 일요일 ~ 6: 토요일
    const date = userDate.getDate();
    const month = userDate.getMonth() + 1;
    const year = userDate.getFullYear();

    const isHoliday = holiday.holiday.includes(`${year}-${month}-${date}`);

    if( isHoliday || today === 0) return `3`
    else if(today === 6) return `2`
    else return `1`
  }

별도로 훅으로 만들어서 넣었습니다. useSearchParams 훅을 사용하기도 했습니다.

• 전역 상태인 url 쿼리 스트링 사용: 하나 하나 state로 하는 것보단 전역 상태에서 꺼내오는 것으로 대체했습니다.
• init, set, get 등으로 역할 분리: 초기값은 getUserToday를 사용한 것이지만, 그 다음부터는 사용자가 선택한 값으로 해야 합니다. 따라서 처음 값을 초기화할 때 사용할 현재 시간을 기준으로 계산하는 로직, 새로운 값으로 설정하는 로직, 해당 값을 가져오는 로직으로 분리했습니다.

✅이벤트 핸들러 정리

기존 코드

const handleClickRefresh = () => { setRefresh(!refresh);}
const handleClickDay = (event) => {setDay(event.target.id);}
const handleClickDirect = (event) =>{setDirect(event.target.id || "1");}

최근에 이벤트 함수를 return하면 사용이 편한 걸 알았습니다. 그래서 해당 방법을 사용해 이벤트 핸들러를 변경했습니다.

리팩토링 이후

const handleClickRefresh = (refresh) => () => { setRefresh(refresh) }
const handleClickDay = (id) => (event) => { setUserDay(id) }
const handleClickDirect = (id) => (event) =>{ setUserDirect(id) }
const handleClickMore = () => {setCount( prev => prev + 1 )}

• () => (event) => {} 형태로 변경
• setState: 기존 state로 선언한 변수들의 변경으로 해당 부분도 교체
• clickMore: count값을 변경하기 위한 트리거를 선언

✅return 부분 정리

위의 리팩토링 과정을 거치면서 return 부분에도 많은 변화가 있었습니다.

기존 코드

    return(
        <PageTemplate>
            <StyledLinkBtn onClick={handleClickStation}>{state}</StyledLinkBtn>
            <ButtonWrap>
                <DayButton onClick={handleClickDay}>
                    <DefaultBtn variant={day === "1" ? "primary" :"basic"} id='1'>평일</DefaultBtn>
                    <DefaultBtn variant={day === "2" ? "primary" :"basic"} id='2'>토요일</DefaultBtn>
                    <DefaultBtn variant={day === "3" ? "primary" :"basic"} id='3'>공휴일</DefaultBtn>
                </DayButton>
                <DirectButton onClick={handleClickDirect}>
                    <DefaultBtn variant={"secondary"} onClick={handleClickRefresh}>초기화</DefaultBtn>
                    <DefaultBtn variant={direct === "1" ? "primary" :"basic"} id='1'>상행</DefaultBtn>
                    <DefaultBtn variant={direct === '2' ? "primary" :"basic"} id='2'>하행</DefaultBtn>
                    <DefaultBtn variant={"basic"} onClick={()=>setShowTime(!showTime)}>급행</DefaultBtn>                
                </DirectButton>
            </ButtonWrap>
            <ul>
                {rowInfo.map((info, index)=>{
                    return (
                    <StyledList key={index}>
                        <Time>{info[0]}</Time>
                        <Station>{info[2]} ➡️ {info[3]}</Station>
                        <StyledTag aria-label="지하철 번호">{info[1]}</StyledTag>
                    </StyledList>
                    )
                })}
            </ul>
        </PageTemplate>
    )

리팩토링 이후

  return(
    <PageTemplate>
        <StyledLinkBtn onClick={handleClickStation}>{state}</StyledLinkBtn>
        <ButtonWrap>
            <DefaultBtn variant={"secondary"} onClick={handleClickRefresh(!refresh)}>초기화</DefaultBtn>
            <DayButton>
                ['평일', '토요일', '공휴일'].map((day, index) => (
                  <DefaultBtn key={index} variant={makeClickedButton(isCurrentDay(index+1))} onClick={handleClickDay(`${index+1}`)}>{day}</DefaultBtn>
                ))
            </DayButton>
            <DirectButton>
                ['상행', '하행'].map((direct, index) => (
                  <DefaultBtn key={index} variant={makeClickedButton(isCurrentDirect(index+1))} onClick={handleClickDirect(`${index+1}`)}>{direct}</DefaultBtn>
                )) 
            </DirectButton>
        </ButtonWrap>
        {isError ?  
          <ErrorComp/>
        : <ul>
            {timeTableInfo.map((info)=>(
                <StyledList key={info.id}>
                    <Time>{info.ARRIVETIME}</Time>
                    <Station>{info.SUBWAYSNAME} ➡️ {info.SUBWAYENAME}</Station>
                    <StyledTag aria-label="지하철 번호">{info.TRAIN_NO}</StyledTag>
                </StyledList>
            ))}
        </ul>

        }
        <DefaultBtn variant={"secondary"} onClick={handleClikMore}>더 불러오기</DefaultBtn>
    </PageTemplate>
  )

• button들 정리: 기존에는 좀 더 정보를 잘 보이기 위해서 풀어서 썼다면, 이번에는 좀 묶어서 중복된 코드를 줄여보았습니다. 이부분에 대해선 정답이 없습니다. 조만간 DayButton과 DirectButton 컴포넌트도 추상화해서 줄어들 것 같습니다.
• timeTableInfo: 기존에 배열 내 배열로 정보를 넣어서 특정 인덱스로 불어왔다면, 객체로 넣어서 어떤 정보를 가지고 오는지 좀 더 명확하게 표시했습니다.

✔️결론

부수 효과를 발생하는 액션과 순수 계산 위주로 하여 부수 효과가 없는 계산이라는 역할로 분리를 하면서 개선할 수 있었습니다. 물론 더 손을 봐야 합니다. 한 번에 불러오는 useSubTime 중에서도 day만 또 따로 분리해서 사용할 수도 있습니다. 그렇지만, 아직 더 복잡한 코드를 본 적은 없지만, 기준이 정해지고 리팩토링을 하니 너무 재밌네요... 과거의 나야 딱 기다려!!