분류 전체보기142 [React] 3-9. 단위 변환기 코드 발전시키기 📌 단위변환기 발전시키기 메뉴바를 만들어서 사용자가 원하는 단위변환기를 선택할 수 있도록 할 것이다. 앞에서 분/시간 변환기를 만들었는데, 마일/킬로미터 변환기를 하나 더 만들어 둘 중 하나를 사용자가 고를 수 있게 할 것이다. 1. App 컴포넌트에 작성했던 분/시간 변환 코드들은 또 다른 컴포넌트인 MinutesToHours에 붙여넣기 할 것이다. (h1 tag 부분(Super Converter)은 지워준다.) App 컴포넌트는 제목 부분만 남기고 초기화한다. function MinutesToHours() { const [amount, setAmount] = React.useState(0); ..... {inverted ? "Turn back" : "Invert"}button> ); } functio.. 2023. 5. 31. [React] 3-8. 단위 변환 앱 변수명 수정하기 📌 단위 변환 앱 살짝 수정하기 - state명 flipped을 inverted로, modifier명 setFlipped를 setInverted로 바꾸기 - Flip 버튼명 상황에 따라 바꾸기 inverted 상태라면 "Turn back"이 버튼명이 되고, inverted 상태가 아니라면 "Invert"가 버튼명이 된다. {inverted ? "Turn back" : "Invert"} 2023. 5. 31. [React] 3-7. Input과 State를 이용하여 단위 변환 앱 만들어보기 (3) 📌 단위 변환 앱 만들어 보기 전 시간에 이어서! 7. Flip 버튼 생성과 하나의 input에만 입력할 수 있도록 하기 7-1. Flip 버튼을 만들고, 그 버튼을 클릭하면 실행될 onFlip 함수를 연결해 준다. ..... Flip ..... 7-2. 지금까지는 minutes 라는 하나의 state만 가지고 있었지만 flip 조작 시 사용되는 새로운 state인 fliped를 만들어 준다. 초깃값은 false라고 설정한다. (분 -> 시간의 상태로, 뒤집어지지 않은 상태를 의미) ..... const [filpped, setFlipped] = React.useState(false); ..... 7-3. onFlip 함수의 내용을 작성하는데, flipped가 true 상태라면 false를 반환하고, f.. 2023. 5. 31. [React] 3-6. Input과 State를 이용하여 단위 변환 앱 만들어보기 (2) 📌 단위 변환 앱 만들어 보기 전 시간에 이어서! 4. 사용자가 Minutes 입력란에 값을 입력할 때 Hours 입력란에 입력되는 값도 같이 바뀌게 하기 다음과 같이 코드를 입력하면 된다. function App() { // 1 const [minutes, setMinutes] = React.useState(0); // 2 const onChange = (event) => { setMinutes(event.target.value); }; return ( Super Converter Minutes Hours // 5 ); } 1. minutes가 곧 state에 해당하였고, 기본값은 0으로 설정하였다. setMinutes는 minutes를 제어하는 함수이다. 2. Minutes 입력란에 변화가 생길 때마.. 2023. 5. 31. 이전 1 ··· 27 28 29 30 31 32 33 ··· 36 다음
