이번 시간에는 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 요소들을 이용하여 코드를 분할 및 조각화를 하고 코드의 가독성을 높이는 방법을 살펴보았습니다.
'웹 개발 > React' 카테고리의 다른 글
| React(리액트) create-react-app으로 프로젝트 생성하기 (0) | 2024.02.19 |
|---|---|
| React(리액트) props(속성) 활용과 예시 (+ propTypes) (1) | 2024.02.18 |
| React(리액트) State를 이용해 단위 변환기 구현하기 (0) | 2024.02.16 |
| React(리액트) 컴포넌트와 이벤트 간단하게 만들고 렌더링하기 (0) | 2024.02.12 |