-
#개인프로젝트 공부학습블로깅 2024. 6. 12. 18:41
label은 input옆에 써주는 글씨
const [minutes, setMinutes] = React.useState("");
리액트에서 가져온 스테이트 사용하고 거기서 데이터를 얻고, 업데이트도 진행하고 있다.
[minutes, setMinutes] 1번은 value 2번은 value를 수정하고 컴포넌트 새로고침할때 쓰는 함수
input의 value로 넣어주는것 input의 value는 state의 value와 값이 같아진다.
input에 변화가 생기면 onChange 함수가 실행
target이란 방금 바뀐 input을 말한다.
event.target.value
state의 결과는 array 이다
input의 value를 state로 연결
onChange 함수는 데이터를 업데이트 해주는 역할
사용자가 input에 무언가 입력을 하게되면 onChange가 실행되고 event.target.value를 얻게되는데
그게 input value가 된다. 그 말은 minutes가 업데이트가 된다는 말!
input을 value와 연결시켜주는 이유는 외부에서도 input값을 수정해주기 위함이다.
math.round(minutes/60) 반올림
flip function 단위변환을 뒤집어 보는 함수
const onFlip = () => setFlipped(!flipped);
flipped가 true면 false가 될 것이고 true면 false가 된다
disabled 속성이 명시된 <input> 요소는 사용할 수 없으며, 사용자가 클릭할 수도 없습니다.
또한, 폼 데이터가 제출될 때도 disabled 속성이 명시된 <input> 요소의 데이터는 제출되지 않습니다.
const onFlip = () => setFlipped((current) => !current);
onFlip은 값을 받아서 그 반대의 값을 내놓는다
value={flipped ? amount : Math.round(amount / 60)}
flipped 가 true이면 state에 값 그래도 보여주고 false라면 변환된 값(Math.round(amount / 60))을 보여줘라
'학습블로깅' 카테고리의 다른 글
#개인프로젝트 공부 (1) 2024.06.12 #개인프로젝트 공부 (0) 2024.06.12 #개인프로젝트 공부 (0) 2024.06.12 # 개인프로젝트 공부 (0) 2024.06.12 #개인프로젝트 공부 (0) 2024.04.26