React(리액트) 컴포넌트 분할/조각화를 통해 코드 가독성 높이기
이번 시간에는 React(리액트) 코드를 여러 개의 JSX 요소들로 나누어 코드의 가독성을 높이는 방식으로 코드를 최적화해 보도록 하겠습니다.
실행 결과와 전체 코드
먼저 실행 결과입니다.
select 태그를 사용하여 모드를 선택할 수 있고, 원하는 단위를 다른 단위로 변환할 수 있습니다.
↓ 전체 코드는 다음과 같습니다.
<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const MinutesToHours = () => {
const [amount, setAmount] = React.useState(0);
const [inverted, setInverted] = React.useState(false);
const onChange = (event) => {
setAmount(event.target.value);
};
const reset = () => setAmount(0);
const onFlip = () => {
reset();
setInverted((current) => !current);
};
return (
<>
<div>
<input
value={inverted ? Math.round(amount * 60 * 100) / 100 : amount}
id="minutes"
placeholder="분"
type="number"
onChange={onChange}
disabled={inverted}
style={{ textAlign: "right" }}
/>
<label htmlFor="minutes"> 분</label>
</div>
<div>
<input
value={inverted ? amount : Math.round((amount / 60) * 100) / 100}
id="hours"
placeholder="시간"
type="number"
disabled={!inverted}
onChange={onChange}
style={{ textAlign: "right" }}
/>
<label htmlFor="hours"> 시간</label>
</div>
<button onClick={reset}>초기화</button>
<button onClick={onFlip}>뒤집기</button>
</>
);
};
const KilometersToMiles = () => {
const [amount, setAmount] = React.useState(0);
const [inverted, setInverted] = React.useState(false);
const onChange = (event) => {
setAmount(event.target.value);
};
const reset = () => setAmount(0);
const onFlip = () => {
reset();
setInverted((current) => !current);
};
return (
<>
<div>
<input
value={inverted ? Math.round(amount * 1.609 * 100) / 100 : amount}
id="kilometers"
placeholder="킬로미터"
type="number"
onChange={onChange}
disabled={inverted}
style={{ textAlign: "right" }}
/>
<label htmlFor="minutes"> 킬로미터</label>
</div>
<div>
<input
value={
inverted ? amount : Math.round((amount / 1.609) * 100) / 100
}
id="miles"
placeholder="마일"
type="number"
disabled={!inverted}
onChange={onChange}
style={{ textAlign: "right" }}
/>
<label htmlFor="hours"> 마일</label>
</div>
<button onClick={reset}>초기화</button>
<button onClick={onFlip}>뒤집기</button>
</>
);
};
function App() {
const [index, setIndex] = React.useState("x");
const onSelect = (event) => {
setIndex(event.target.value);
};
return (
<div>
<h1>단위 변환기</h1>
<select value={index} onChange={onSelect}>
<option value="x">단위를 선택해주세요.</option>
<option value="0">시간 ↔ 분</option>
<option value="1">킬로미터 ↔ 마일</option>
</select>
<hr />
{index === "x" ? "단위를 선택해주세요." : null}
{index === "0" ? <MinutesToHours /> : null}
{index === "1" ? <KilometersToMiles /> : null}
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
코드 부분별로 살펴보기
그럼 이제 코드를 여러 개의 작은 JSX 요소로 나누는 것이 어떤 장점이 있는지 살펴봅시다.
<div>
<h1>단위 변환기</h1>
<select value={index} onChange={onSelect}>
<option value="x">단위를 선택해주세요.</option>
<option value="0">시간 ↔ 분</option>
<option value="1">킬로미터 ↔ 마일</option>
</select>
<hr />
{index === "x" ? "단위를 선택해주세요." : null}
{index === "0" ? <MinutesToHours /> : null}
{index === "1" ? <KilometersToMiles /> : null}
</div>
주목할 코드는 이 부분입니다.
select 태그를 이용하면 정해진 목록들 중 하나를 선택할 수 있게 됩니다.
여기서 만약 option을 변경한다면, onChange라는 이벤트를 발생시킬 수 있습니다.
React에서 자동으로 onChange 이벤트가 감지되면, 우리는 그때 실행할 함수를 지정해줄 수 있습니다.
const [index, setIndex] = React.useState("x");
const onSelect = (event) => {
setIndex(event.target.value);
};
이 코드를 살펴볼까요?
우리는 위에서 사용자가 option을 변경했을 때 onSelect라는 함수를 실행하도록 지정해두었습니다.
그렇다면 onSelect 함수에서는 우리가 이전에 배운 State 개념을 활용하여 변수의 값을 실시간으로 바꿔줄 수 있습니다.
따라서 setIndex 함수를 호출하여 event에서 선택한 value 값으로 index 값을 변경해 줄 수 있겠네요.
{index === "x" ? "단위를 선택해주세요." : null}
{index === "0" ? <MinutesToHours /> : null}
{index === "1" ? <KilometersToMiles /> : null}
방금 살펴보았던 코드입니다.
index 값이 setIndex 함수에 의해 변경됨에 따라, 위와 같은 삼항 연산자를 활용하여 각 코드 블록이 실행되거나 실행되지 않도록 할 수 있습니다.
여기에서 JSX 요소가 굉장히 유용하게 쓰입니다.
코드의 위에서는 'const MinutesToHours = () => {}'와 같이 MinutesToHours가 호출되었을 때 실행할 코드가 작성되어 있습니다.
우리는 긴 코드를 삼항연산자에 길게 작성할 필요 없이, 위에서 작성한 JSX 요소의 이름만을 태그로 달아 해당 코드가 실행될 수 있도록 하는 것입니다.
이렇게 코드를 조각화하여 활용해 주면 코드의 가독성을 높이고 이해하기 쉬운 코드를 작성할 수 있습니다.
이렇게 해서 간단한 단위 변환기에 여러 가지 모드를 추가하고, 삼항 연산자와 JSX 요소들을 이용하여 코드를 분할 및 조각화를 하고 코드의 가독성을 높이는 방법을 살펴보았습니다.