TIL-220111.md

👄 Today

---

• HA 첫번째날~ 문제 다 풀었다. ㅎㅎ
• 오랜만에 리액트 파일 만들고, useState를 간단히 복습했다. 프로젝트에 들어가기 전까지 복습겸 간단히 무비앱을 만들어봐야겠다는 생각이 들었다. 클론코딩인데 이것도 만든다고 봐야하는건가? 아무튼.
• AWS 파이프라인 생성시 오류를 얼른 잡아야 하는데.. AWS 보기 싫다. 어쩌면 좋을까~ㅜ

useState

import { useState } from "react"
// state를 변경해주는데는 2가지 방법이 있다.
//1. 값을 직접 변경해주는것 ex) setCounter(4)
//2. 함수를 변경해주는것 ex)setCounter((current) => current + 1)

function App() {

  const [counter, setCounter] = useState(0)
  const counting = () => {
    // setCounter(counter + 1)
    setCounter((current) => current + 1)  // 이렇게 쓰는게 더 좋은 코드이다.
  }

  return (
    <div>
      <div>{counter}</div>
      <button onClick={counting}>Click me</button>
    </div>
  ) 
}

export default App;

---

import { useState } from "react";
{/* label은 input 옆에서 사용. 만약 label누르면 옆에 input 선택됨(for로 연결) */}
// 여기는 jsx를 사용하기 때문에 html의 class와 jsx의 class는 다르다. html class는 jsx에서는 className 사용
// react.js에서 input은 uncontrolled라 한다. 즉 Input의 value는 통제불가능
function App() {
  const [minutes, setMinutes] = useState() // 0, "", 빈값 모두 아무값이 없다는 의미/ 기본적으로 useState는 array를 제공한다.
  function onChangeFunction(e) {
    //console.log(e) // SyntheticBaseEvent를 주는데 이벤트를 최적화한 가짜 이벤트임.원래의 event를 얻고싶다면 native event를 봐
    // 포인트는 target를 가지고 있다는것, target은 방금 바뀐 input을 의미. 그 안에 value를 확인해보자
    //console.log(e.target.value)
    setMinutes(e.target.value)
  }

  return (
  <div>
   <h1 className="hi"> Super Converter</h1>
   <label htmlFor="minutes">Minutes</label> 
   <input 
   value = {minutes}
   id="minutes" 
   placeholder="minutes" 
   type="number"
   onChange={onChangeFunction}
   />
   <div>You want to convert {minutes}</div>
   <label htmlFor="hours">Hours</label>
   <input id="hours" placeholder="Hours" type="number"/>
   </div>

  ) 
}

export default App;