react 리팩토링의 중요성

코드가 길수록 효율성, 가독성이 떨어진다.

또한 일단 처음에 코드를 짤 때는 어떻게든 돌아가도록 구현하는 것에 꼳혀서 코드가 비효율적일 수가 있다.

이에 코드를 다 짠 후 리팩토링하는 시간을 가져야 

코드의 효율도 올라가고 실력도 더 up 된다고 할 수 있다.

 

이번에 2차 프로젝트를 하면서 리팩토링한 부분에 대해 정리해보려고 한다.

 

비구조화 할당

const [adultPassengel, setAdultPassengel] = useState(1);
const [childPassengel, setChildPassengel] = useState(0);
const [babyPassengel, setBabyPassengel] = useState(0);
const [rating, setRating] = useState('전체');

const plusAdultPassengel = () => {
    setAdultPassengel(prev => prev + 1);
  };

  const minusAdultPassengel = () => {
    setAdultPassengel(prev => prev - 1);
  };

  const plusChildPassengel = () => {
    setChildPassengel(prev => prev + 1);
  };

  const minusChildPassengel = () => {
    setChildPassengel(prev => prev - 1);
  };

  const plusBabyPassengel = () => {
    setBabyPassengel(prev => prev + 1);
  };

  const minusBabyPassengel = () => {
    setBabyPassengel(prev => prev - 1);
  };

  const changeRating = rating => {
    setRating(rating);
  };

리팩토링 후

const [passengerInfo, setPassengerInfo] = useState({
    adult: 1,
    child: 0,
    baby: 0,
    rating: '전체',
  });
 const { adult, child, baby, rating } = passengerInfo;
 
 const plusPassengerNumber = e => {
    const { name } = e.target;
    setPassengerInfo(prev => ({ ...prev, [name]: prev[name] + 1 }));
  };

  const minusPassengerNumber = e => {
    const { name } = e.target;
    setPassengerInfo(prev => ({ ...prev, [name]: prev[name] - 1 }));
  };

  const changeRating = rating => {
    setPassengerInfo(prev => ({ ...prev, rating }));
  };

코드가 훨씬 간결해졌고 가독성도 높아졌다.

함께 관리할 수 있는 건 함께 관리하도록 하자!

 

---

내가 짰지만 나도 이해하기 어렵다.

{child === 0 && baby === 0
  ? `성인${adult},${rating}`
  : child > 0 && baby === 0
  ? `성인${adult},소아${child},${rating}`
  : child === 0 && baby > 0
  ? `성인${adult},유아${baby},${rating}`
  : `성인${adult},소아${child},유아${baby},${rating}`}

리팩토링 후

//위에서 미리 선언 후
const adultCount = `성인${adult},`;
const childCount = `${child !== 0 ? `소아${child},` : ''}`;
const babyCount = `${baby !== 0 ? `유아${baby},` : ''}`;

//변수를 활용
{adultCount} {childCount} {babyCount} {rating}

---

겹치는 건 상수데이터를 만들고 map을 돌리자.

<PeopleDiv>
      <RightDiv>
        <p>탑승인원과 좌석</p>
        <p>등급을 선택해주세요.</p>
      </RightDiv>
      <CenterDiv>
        <Text>탑승인원</Text>
        <PassengerDiv>
          <Division>
            <Sort>성인</Sort>
            <Desc>만 13세 이상 </Desc>
          </Division>
          <Setting>
            <ButtonMinus
              onClick={minusAdultPassengel}
              disabled={adultPassengel === 1}
            >
              &#10134;
            </ButtonMinus>
            <Num>{adultPassengel}</Num>
            <ButtonPlus onClick={plusAdultPassengel}>&#10133;</ButtonPlus>
          </Setting>
        </PassengerDiv>
        <PassengerDiv>
          <Division>
            <Sort>소아</Sort>
            <Desc>만 2세 ~ 만 12세</Desc>
          </Division>
          <Setting>
            <ButtonMinus
              onClick={minusChildPassengel}
              disabled={childPassengel === 0}
            >
              &#10134;
            </ButtonMinus>
            <Num>{childPassengel}</Num>
            <ButtonPlus onClick={plusChildPassengel}>&#10133;</ButtonPlus>
          </Setting>
        </PassengerDiv>
        <PassengerDiv>
          <Division>
            <Sort>유아</Sort>
            <Desc>만 2세 미만, 보호자와 동반 착석</Desc>
          </Division>
          <Setting>
            <ButtonMinus
              onClick={minusBabyPassengel}
              disabled={babyPassengel === 0}
            >
              &#10134;
            </ButtonMinus>
            <Num>{babyPassengel}</Num>
            <ButtonPlus
              onClick={plusBabyPassengel}
              disabled={babyPassengel === adultPassengel}
            >
              &#10133;
            </ButtonPlus>
          </Setting>
        </PassengerDiv>
      </CenterDiv>
      <LeftDiv>
        <Text>좌석등급</Text>
        <Raging
          primary={rating === '전체'}
          onClick={e => changeRating(e.target.innerText)}
        >
          전체
        </Raging>
        <Raging
          primary={rating === '비즈니스석'}
          onClick={e => changeRating(e.target.innerText)}
        >
          비즈니스석
        </Raging>
      </LeftDiv>
    </PeopleDiv>

리팩토링 후

<PeopleDiv>
      <RightDiv>
        <p>탑승인원과 좌석</p>
        <p>등급을 선택해주세요.</p>
      </RightDiv>
      <CenterDiv>
        <Text>탑승인원</Text>
        {PASSENGER_DATA.map(({ id, sort, desc, name }) => {
          return (
            <PassengerDiv key={id}>
              <Division>
                <Sort>{sort}</Sort>
                <Desc>{desc}</Desc>
              </Division>
              <Setting>
                <ButtonMinus
                  name={name}
                  onClick={minusPassengerNumber}
                  disabled={condition[name]}
                >
                  &#10134;
                </ButtonMinus>
                <Num>{passengerInfo[name]}</Num>
                <ButtonPlus
                  name={name}
                  onClick={plusPassengerNumber}
                  disabled={name === 'baby' && adult <= baby}
                >
                  &#10133;
                </ButtonPlus>
              </Setting>
            </PassengerDiv>
          );
        })}
      </CenterDiv>
      <LeftDiv>
        <Text>좌석등급</Text>
        {SEAT_DATA.map(({ id, seat_rating }) => {
          return (
            <Rating
              key={id}
              primary={rating === seat_rating}
              onClick={e => changeRating(e.target.innerText)}
            >
              {seat_rating}
            </Rating>
          );
        })}
      </LeftDiv>
 </PeopleDiv>
 
 const PASSENGER_DATA = [
  { id: 1, sort: '성인', desc: '만 13세 이상', name: 'adult' },
  { id: 2, sort: '소아', desc: '만 2세 ~ 만 12세', name: 'child' },
  {
    id: 3,
    sort: '유아',
    desc: '만 2세 미만, 보호자와 동반 착석',
    name: 'baby',
  },
];

const SEAT_DATA = [
  { id: 1, seat_rating: '전체' },
  { id: 2, seat_rating: '비즈니스석' },
];