~0427 Input과 state (분 -> 시간으로 바꾸기)

벌써 3번째 쓰는 글이다 쓰다가 수업하고, 쓰다가 잠들고 멘탈나가네 ㅎㅎ ＼(´◓Д◔`)／

나 힘들어 이번엔 한번에 다 쓰자 고고 ก็็็็็็็็็็็็็ʕ•͡ᴥ•ʔ ก้้้้้้้้้้้

 

머리가 나쁘다 하면 몸이 고생한다 하였는가 업보다 최민규 견뎌라

 

저번시간에 이어 state에 관한 내용을 다룰 건데 input으로 숫자를 입력받아 그것을 분이라 치면 시간으로 변환해주는

그런 예제를 만들며 state와 관련된 여러가지를 배워 볼 시간이다. 참고로 당연히 분/60==시간 이 원리가 중요한 게 아니라

이 예제를 구현하는데 생각해야하는 state관련 개념들에 집중하자. 3트지만 아자아자!! 

 

점점 코드가 길어진다 다음부터 딱 수정한 부분만 캡쳐해줘 미래민규야

중간과정을 꼼꼼히 캡쳐해가면서 설명해야 하는데 ㅋㅋㅋㅋ 큰일 났다

아무튼 기억을 되살리며 한줄한줄 어떤 원리와 무슨 기능인지 떠올려보자

저번시간(입력하면 개수 늘려주는 거)과 관련된 건 다 지운채로 처음부터 작성했다. 

 

1. line17~33

먼저 무엇을 return하는가 18 line부터 보면 큰 div 안에 minutes분을 입력하는 것을 담은 div와 시간을 입력하는 div

두 개로 나뉘는 것을 볼 수 있다.

20 line 슈퍼 컨버터!라는 대단한 이름을 가진 제목을 적어주었고, label 즉 input 태그 옆에 무엇을 입력해야하는지 나타내 주는 역할 + 안에 for을 적으므로 label을 클릭해도 인풋 창을 입력하도록 했다. 다만 react에서는 for이 아닌 htmlFor로 입력해야 하는 거 기억하자!

그다음 분을 입력받는 input창으로 {minutes}을 통해 input의 value값을 state에 넣어 외부에서도 변형, 수정 가능하도록 했다. 그다음에 onChange함수는 조금만 이따 보도록 하자.

26 line~시간과 reset button을 포함한 div로 minutes와 매우 유사한 구조를 보이지만,  Math.round() 반올림해주기 + minutes을 60으로 나누고 시간으로 표현한 점 그리고 버튼이 클릭되면 minutes와 hours모두 reset 하는 버튼 또한 포함되어 있다.

 

잠깐 멈추고 구조를 보고 다시 이어 나가보자

오류뜨는데 내용은 이러하다 "너 input value바꿀거면서 왜 value로 선언해 이자식아 defaultValue로 바꿔서 작성해ᕙ( ︡’︡益’︠)ง" 음 정상적을 작동되니 일단은 그냥 쓰도록 하자. 하하

      

2. line16 

방금 막 위에서 한 reset button의 기능으로 minutes, hours의 value값을 0으로 만드는 기능을 하는 함수이다.

 

3. line 11~15

저번에 배운 React.useState(); 을 통해 minutes라는 값을 setMinutes라는 함수로 우리의 용도에 맞게 수정할 예정이다.

그다음에 있는 onChange함수 input안에 넣은 value를 가져와 데이터를 새로 업데이트해주는 기능을 한다.

저번 시간에 우리가 배운 것처럼 따로 리 렌더링 없이 input에 다른 값의 value가 들어간다면 자동으로 그 해당하는 minuets에 해당하는 hours만 값을 바꿔주는 것이다.

ㄴ+ 좀 더 내가 이해한 쉬운 방식으로 이야기하면 input은 onChange을 통해 새로 입력된 값을 event.target.value에서 가져와 우리에게 보여주고 hours 또한 변환해서 바로 보여주는 것이다. onChange가 없는 경우에는 수정이 되고 새로 갱신이 되었어도 우리가 보는 html페이지상 보여주지 못하는 것이다.

 

한 번에 하면 이렇게 빨리 끝날 것을 빨리 다음 강의도 정리해서 올려야 하니 이제 가자 안녕 미래 민규야