Unit Converter

1. react js를 사용해서 우선 html틀 만들어주기!

 function App() {
      return (
        <div>
          <h1>Unit Converter</h1>
          <label htmlFor="minutes">Minutes</label>
          <input id="minutes" placeholder="Minutes" type="number"></input>
          <label htmlFor="hours">Hours</label>
          <input id="hours" placeholder="Hours" type="number"></input>
        </div>
      );
    }
/*
레이블 : 글자 클릭했을 때, 해당 input창에 mousefocus해준다.
(예전에 배웠는데 고새 다 까먹음^^ 3개월만에 dog미친속도로 배워서 100% 까먹을 것 같긴함 ㅎ)
사용방법은~ input id와 레이블 htmlFor 값을 같게 만들어주면됨.
	-js는 label에 for을 넣어주면되지만, react js는 htmlFor라고 넣어줘야함. 이런게 몇개 있는데.. 
    다른 예론, js는 클래스를 부여할때 class 라고 썼지만, react에선 className이라고 적어줘야함.
*/

2. input value를 어케 가져올찌 생각을 해봐야함. useState는 데이터를 저장시키고 업뎃을 시켜주닌까 그걸 사용하면 될꺼같음!!

 function App() {
 	  const [minutes, setMinutes] = React.useState();
      const onChange = () =>{
      	console.log("somebody wrote!");
      };
      return (
        <div>
          <h1>Unit Converter</h1>
          <label htmlFor="minutes">Minutes</label>
          <input onChange ={onChange} value ={minutes} id="minutes" placeholder="Minutes" type="number"></input>
          <label htmlFor="hours">Hours</label>
          <input id="hours" placeholder="Hours" type="number"></input>
        </div>
      );
    }

• useState 에서 데이터를 얻고, 업데이트도 진행시켜 주고있다.
  반복해서 말하면, 첫번째 aregument는 현재 value를 지칭하고! (minutes)
  두번째 aregument는 함수! value를 어떻게 업데이트 해줄질 정해줘. (setMinutes)

  input value로 useState의 첫번째 인자를 들고오면, useState의 현재값을 input value로 값을 같게 만들 수 있는거지.

• 다음으로 하고싶은게 input value가 바뀔때마다 그 변화를 감지하고 싶은거.
  그래서 onChange 함수를 만들어서, eventlistener 즉 input onChange에 넣어준거임.
  input onChange는 변화가 생길때마다 onChange함수를 실행시켜 주게되는거죠? 이-지~

const onChange = () =>{
      	console.log("somebody wrote!");
};

• 변화 감지까지 성공했구, 다음으로 하고싶은게 input value를 어케 가져오지?
  react js는 js랑 거진 비슷해서!! onChange에 event를 넣어 개발자 도구에서 정보 취득이 가능해. const onChange = (event) =>{ console.log(event); }; 일케말이쥐. 개발자 도구를 열어서보면, "SyntheticBaseEvent"에 target에 value값에 내가 input창에 넣은 값을 반환하는걸 확인할수있찌.
  

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

와우. 새롭다. js에선 input을 form테그에 넣어줘서 value를 받아왔어야 했는데. react똑똑이네..?
출력된거 확인 했구. 이제 업데이트 함수에 넣어주기만 하면됨. 이-지~

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

3. converter초안

function App() {
      const [minutes, setMinutes] = React.useState();
      const hours = Math.round(minutes / 60);
      const onChange = (event) => {
        setMinutes(event.target.value);
      };
      const reset = () => setMinutes("");
      return (
        <div>
          <h1>Unit Converter</h1>
          <div>
            <label htmlFor="minutes">Minutes</label>
            <input
              value={minutes}
              id="minutes"
              placeholder="Minutes"
              type="number"
              onChange={onChange}
            ></input>
          </div>
          <div>
            <label htmlFor="hours">Hours</label>
            <input
              value={hours}
              id="hours"
              placeholder="Hours"
              type="number"
            ></input>
          </div>
          <button onClick={reset}>Reset</button>
        </div>
      );
    }

[result]

• 추가하고 싶은 기능.. : hours를 minutes 로 변환하는것, minutes를 작성하고 있을대 hours input창을 disable하고싶은것!

4. flip버튼을 만들어서 disabled 해보기!

const [flipped, setFlipped] = React.useState(false);
const onFlip = () => setFlipped((current) => !current);
<input value={minutes} id="minutes" placeholder="Minutes" type="number" onChange={onChange} 
disabled={flipped}></input>

<input value={Math.round(minutes / 60)} id="hours" placeholder="Hours" type="number" 
disabled={!flipped}></input>

<button onClick={onFlip}>Flipped</button>

[설명]

• const [flipped, setFlipped] = React.useState(true);
  useState함수를 써서 flipped 변수에 boolean인수를 넣어준다!
  default 값으로 false를 넣었을때, input의 disalbed에 !flipped를 넣어줌으로써, hours의 input창은 비활성화(disabled = true)가 기본값으로 설정된다.

• 버튼을 눌렀을때 비활성화를 활성화로 전환하고 싶기때문에, 업뎃함수 setFlipped를 사용한다.
  const onFlip = () => setFlipped((current) => !current);
  current를 왜 쓰냐고 물어보면 저번 포스트를 참조.. onFlip함수의 원리는 간단하다.
  기존값을 반대로 업데이트 해주는것. (!current)

5. hours input에도 onChange함수를 적용시켜, input에 숫자를 입력할 수 있게하기 + 삼항연산자를 써서 hours input창에 입력하면 minutes로 단위를 변환시키도록, minutes input창에 입력하면 hours로 단위를 변경할 수 있도록 해보기.

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

• 우선, const [minutes, setMinutes] = React.useState(0);를 위 코드와 같이 변경함.
  이유는 "분"뿐만 아니라, "시간"까지 묶어줄 수 있는 변수명이 필요했기 때문.

<input value={Math.round(minutes / 60)} id="hours" placeholder="Hours" type="number" 
disabled={!flipped} onChange={onChange}></input>

• 담으론, hours input창에도 onChange함수를 불러옴.

**이제 value값을 삼항연산자로 손 봐야함. 만약 flipped의 default값이 flase임을 참고하여 코드를 작성하면, 다음과 같이 작성된다.

<input value= flipped? amount * 60 :amount id="minutes" placeholder="Minutes" type="number" onChange={onChange} 
disabled={flipped}></input>

<input value= flipped ? amount : Math.round(amount/ 60) id="hours" placeholder="Hours" type="number" 
disabled={!flipped} onChange={onChange}></input>

과정이 헷갈릴수 있는데 삼항연산자가 짜피 true / false 둘중 하나 때려넣구 코드실행시켜서 라이브뷰로 보면서 조정하는게 젤 빠름 ㅎ 무튼 이로써 완전체가 되었따 -!

아 버튼 flipped말고 flip이라할껄 -_- 동영상 귀챠나서 몬함