리팩토링 가이드

[Bhanjo]

요약

state로 관리될 값과 전역상태로 관리되어야할 값 그리고 일반 변수로 사용해야할 값을 명확하게 구분하자.

• 페이지 내 state 사용 최소화
• 중복되는 recoil 값 통일하기 (calendarData, dateList, selectedDates)
• state로 사용될 값과 일반 변수로 사용할 값 명확하게 구분하기 (state는 리렌더링을 발생시킨다. 화면에 표시되는 상태만을 위해 사용한다.)
• resolver 적극적으로 활용 (api 요청과 이벤트 사이 action resovler를 레이어를 추가해 이 내부에서 ui state를 api를 요청하기 위한 값으로 변환하기) resolver는 tsx가 아닌 ts임
• 같은 컴포넌트 내 state를 참고하여 useEffect 동작 금지 (리렌더링이 2배로 발생 및 사이드이펙트로 인해 state 변화 추적 어려움)

resolver 활용 예시

before (resolver 적용 전)

useEffect(() => {
  const dateWithTime: string[] = [];
  timeBlock.map((itemList, timeIndex) => {
    itemList.filter((item, dateIndex) => {
      const date = dateList[dateIndex] + ' ' + timeList[timeIndex];

      item && dateWithTime.push(date);
    });
    getDatesAsc(dateWithTime);
  });
  setSelectedDates(dateWithTime);
}, [timeBlock]);

const requestCreateUser = async () => {
  const res = await registerSchedule({
    roomCode: params.code ?? '',
    username: nickname,
    password: password,
    dateOnly: roomInfo?.dateOnly ?? !!roomInfo?.dateOnly,
    dates: selectedDates,
  });
  localStorage.setItem('token', res?.data.accessToken ?? '');
  navigate(`/result?code=${params.code}`);
};

위 코드에서 selectedDates 값은 화면에 표시되는 값이 아닌 api 형식에 맞게 변환시키기 위한 값임
따라서 아래의 과정을 거친다.

1. state로 관리하는 것이 아닌 일반 변수로 관리한다. (렌더링에 영향을 주지 않기 위해)
2. 값이 변경될 때마다 값을 포맷팅시키는 것이 아니라 time과 date를 따로 관리한다.
3. request 요청을 보낼 때 resolver 레이어에서 비로소 useEffect에서 하던 동작을 실행한다. (useEffect 사용x)
4. resolver 레이어는 아래와 같다.

after (resolver 적용 후)

const resolveCraeteUserRequest = () => {
  let dates = 캘린더에서 active된 값들; // ['2023-08-31', '2023-09-01']

  if (!dateOnly) {
    // YYYY-MM-DD hh:mm 형식으로 맵핑
      dateWithTime = [];
      timeBlock.map((itemList, timeIndex) => {
        itemList.filter((item, dateIndex) => {
          const date = dateList[dateIndex] + ' ' + timeList[timeIndex];
    
          item && dateWithTime.push(date);
        });
        dates  = dateWithTime;
    });
  }

  // 이후 requestCreateUser 동작 실행
}