프론트엔드 개발자가 될거야./react
react 리팩토링의 중요성
정니정은니
2022. 8. 7. 22:41
코드가 길수록 효율성, 가독성이 떨어진다.
또한 일단 처음에 코드를 짤 때는 어떻게든 돌아가도록 구현하는 것에 꼳혀서 코드가 비효율적일 수가 있다.
이에 코드를 다 짠 후 리팩토링하는 시간을 가져야
코드의 효율도 올라가고 실력도 더 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}
>
➖
</ButtonMinus>
<Num>{adultPassengel}</Num>
<ButtonPlus onClick={plusAdultPassengel}>➕</ButtonPlus>
</Setting>
</PassengerDiv>
<PassengerDiv>
<Division>
<Sort>소아</Sort>
<Desc>만 2세 ~ 만 12세</Desc>
</Division>
<Setting>
<ButtonMinus
onClick={minusChildPassengel}
disabled={childPassengel === 0}
>
➖
</ButtonMinus>
<Num>{childPassengel}</Num>
<ButtonPlus onClick={plusChildPassengel}>➕</ButtonPlus>
</Setting>
</PassengerDiv>
<PassengerDiv>
<Division>
<Sort>유아</Sort>
<Desc>만 2세 미만, 보호자와 동반 착석</Desc>
</Division>
<Setting>
<ButtonMinus
onClick={minusBabyPassengel}
disabled={babyPassengel === 0}
>
➖
</ButtonMinus>
<Num>{babyPassengel}</Num>
<ButtonPlus
onClick={plusBabyPassengel}
disabled={babyPassengel === adultPassengel}
>
➕
</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]}
>
➖
</ButtonMinus>
<Num>{passengerInfo[name]}</Num>
<ButtonPlus
name={name}
onClick={plusPassengerNumber}
disabled={name === 'baby' && adult <= baby}
>
➕
</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: '비즈니스석' },
];