[TIL] ReactJS - setState(2)

오늘 공부한것 & 기억하고 싶은 내용

오늘은 단위 변환기에 대한 코드를 작성해보았다.
먼저 강의에서는 분 <-> 시로 바꿔주는 작업을 했고, 추가로 KM <-> Mile로 바꿔보는 작업을 각자 해보는걸로!

나는 여기에 추가로 평수를 m2(제곱미터) 단위로 바꾸는 작업까지 넣어보았다.

---

단위 변경 식

• 분 <-> 시: * 60, / 60
• KM <-> Mile: * 1.609, / 1.609
• 평수 <-> M2: / 3.3058, * 3.3058

---

1. 먼저 바뀌는 부분을 state화 시켜야 한다.
   초반에 제일 많이 했던 input의 value값을 바꾸는 것이다.
   사용자가 input에 어떤 내용을 쓸지 모르기 때문에 먼저 state로 담아서 바뀌면 setState에 넣는 것이다.
   input의 value가 변경되면 setAmount(event.target.value);로 값을 바꿔주고 리렌더링해줌

const [amount, setAmount] = React.useState();

const onChange = (event) => {
  setAmount(event.target.value);
}

2. 그 다음 바뀌는건 단위 변환을 반대로 해주는 것이다.
   여기서도 자바스크립트에서 정말 많이 사용하는 true와 false를 이용하여 바꿔준다.

const [inverted, setInverted] = React.useState(false);


const Reset = () => {// 데이터 삭제 버튼을 누르면 데이터 값 0으로 초기화
  setAmount(0)
}

const onInvert = () => {// 단위 변환
  Reset();//먼저 초기화 해줌
  setInverted((current) => !current); // 이전 값을 이용해서 현재값을 불러옴
}

그 외 return안에는 JSX로 마크업을 했다.

return ( 
<div>
	<h3>Min To Hours</h3>
    <div>
      <label htmlFor="Minutes">Minutes</label>
      <input value={inverted ? amount * 60 : amount} id="Minutes" type="number" placeholder="Minutes" onChange={onChange} disabled={inverted === true} />
    </div>
          
	<div>
		<label htmlFor="Hours">Hours</label>
		<input value={inverted ? amount : Math.round(amount / 60)} id="Hours" type="number" placeholder="Hours" onChange={onChange} disabled={inverted === false} />
	</div>

	<button onClick={Reset}>Reset</button>
    <button onClick={onInvert}>{inverted ? "Turn back" : "Invert"}</button> 
</div>
);

다른 단위 변경은 input에서 value 식만 변경해주면 됨!

배운점 & 느낀점

오늘은 강의를 듣고 응용해서 다른 것도 바꿔보는 시간을 가졌는데,
코드를 다 지우고 처음부터 다시 짜려니 막막했다.
그래서 처음엔 코드를 다 복붙해서 바뀌는 부분만 작업했는데, 추가로 넣었던 평수 변환하는건 코드 한줄 한줄 이해해가면서 다시 작성해보니 처음 보다는 좀 이해가 되는 느낌이다.
디자인도 예쁘게 바꾸고 싶은데 그건 다음 이시간에 ..^^
state는 리액트의 기본이기 때문에 꼭 알아두고 넘어가자.. 화이팅..