시간 변환기 만들기

시(hours) ↔ 분(minutes) ↔ 초(seconds) 를 바꿔주는 시간 변환기

React로 작은 기능 하나라도 만들어보고 싶은 찰나에 노마드코더 리액트 무료 강의가 있다는 것을 알게 되었다. 이제 나도 useState 개념 하나만으로 시간 변환기를 만들 수 있다😁

1. 사용자가 입력한 값 가져오기

const [minutes, setMinutes] = useState(0);
const onChange = (e) => {
    setMinutes(e.target.value);
};
// 사용자가 입력한 input = 분(minutes)
<label htmlFor='minutes'>Minutes</label>
<input id='minutes' value={minutes} onChange={onChange}/>

1. 사용자가 입력한 value값을 이용할 것이기 때문에 useState를 선언한다.
2. input value값으로 useState에서 선언한 minutes을 할당해준다.
3. input에 변화가 감지될 때 value값을 받아와 setMinutes함수에 넣어준다.

여기서 잠깐👀
label태그에 for 대신에 htmlFor를 사용
input태그에 id값이나 name값을 htmlFor와 동일하게 연결

2. 사용자가 입력한 값 그대로 변환해주기

// 사용자가 입력한 input value값이 다른 unit으로 변환될 input = 시(hours)
<label htmlFor='hours'>Hours</label>
<input id='hours' value={Math.round(minutes / 60)} onChange={onChange} />

1. 변환될 input 값은 다른 useState를 선언하는 것이 아니라, 사용자가 입력한 값을 그대로 가져와서 계산한 후 변환해 준다.
2. 사용자가 분(minutes) input 태그에 숫자를 입력했다면 변환될 값이 시(hours)이기 때문에 분(minutes)/60 을 해주는 것이다.
   
   

3. reset 버튼

reset 버튼을 누르면 초기화되도록 구현하기

const reset = () => setMinutes(0);
<button onClick={reset}>Reset</button>

1. 버튼을 클릭하면 reset 함수가 실행하도록 만든다.
2. reset 함수가 호출되면 setMinutes함수가 호출되어 minutes=0으로 할당해준다.
   
   

4. Flip 버튼

Flip 버튼을 누르면 변환하는 대상이 바뀌도록 구현하기
ex) 분 → 시 상태라면 시 → 분으로 바꿔준다.

const [flipped, setFliped] = useState(false);

const onFlip = () => {
    reset();
    setFliped((current) => !current);
  };

// Minutes
<label htmlFor='minutes'>Minutes</label>
<input value={flipped ? minutes * 60 : minutes}
	   disabled={flipped} />
         
// Hours
<label htmlFor='hours'>Hours</label>
<input value={flipped ? minutes : Math.round(minutes / 60)}
	   disabled={!flipped} />
         
// Flip Button
<button onClick={onFlip}>Filp</button>

1. 사용자는 2개의 input 태그 중에 활성화된 input 태그에만 숫자를 입력할 수 있다.
2. 초기값이 false인 flipped라는 useState를 선언해주고 이 값을 버튼 활성화 여부에 활용한다.

• disabled = true : 버튼 비활성화
• disabled = false : 버튼 활성화

3. 변환하는 대상이 바뀌었을 때 변환 계산을 삼항 연산자로 다시 정리해준다.

• 사용자가 분(minutes)에 숫자를 입력했을 때 : 시 = 분 / 60
• 사용자가 시(hours)에 숫자를 입력했을 때 : 시 = 분 * 60

📌 마무리 하면서

강의 들을 때는 오~ 이정도는 나도 할 수 있겠는데? 라는 자신이 있었다. 그런데 막상 또 코드를 치려고 하니 생각도 안나고 filp 버튼을 만들 때는 계속 헷갈렸다. 이게 true인가? false인가? 혼자 중얼거리면서 헤맸다. 뭔가 잘 안될 때는 노트에 먼저 지금 무엇을 하고 있고 어떤 걸 구현해내야 하는지 차근차근 적어가면서 하면 좀 정리가 되는 거 같다. 특히 input 태그에 type을 number로 적어놓고 text를 쳐서 테스트 하는데 value값이 안나와서 30분 동안 삽질을 했다. 역시 내가 치는 코드 하나하나를 정확히 알아야 이런 어이없는 실수는 하지 않을 거 같다.