728x90
1. converter (min -> hour)
label의 for와 같은 경우에는 JS에서 for 문법이 존재하기 때문에 JSX에서는 html for을 사용 하면 안된다. 헷갈리기때문이다.
쓰면 안되는 html attribute
1. class
2. for
변경
1. className
2. htmlFor
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<!-- body 끝 -->
<!-- 현재는 production mode여서 괜찮지만, development.min.js 이면 경고문구 발생-->
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
function App() {
return (
<div>
<!-- <h1 class="hi"> Super Converter </h1> 사용시 error-->
<h1 className="hi"> Super Converter </h1>
<!-- <label for="minutes">Minutes</label> -->
<label htmlFor="minutes">Minutes</label>
<input id="minutes" placeholder="Minutes" type="number" />
<label htmlFor="hours">Hours</label>
<input id="hours " placeholder="Hours" type="number" />
</div>
);
}
ReactDOM.render(<App />, root);
</script>
</html>
2. unController 된 number
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<!-- body 끝 -->
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function App() {
// 변경 조건을 내부에 작성
const [minutes, setMinutes] = React.useState();
const onChange = () => {
console.log("hi");
};
// 변경될 동작 code
return (
<div>
<h1 className="hi"> Super Converter </h1>
<label htmlFor="minutes">Minutes</label>
<input
value={minutes} // 변하는 state를 넣기
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange} // 변화를 감지하는 onChange
/>
<label htmlFor="hours">Hours</label>
<input id="hours " placeholder="Hours" type="number" />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
- event를 바로 받아올 수 있다.
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<!-- body 끝 -->
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function App() {
// 변경 조건을 내부에 작성
const [minutes, setMinutes] = React.useState();
// getDocument할 필요없이 event로부터 원하는 값을 받아온다.
const onChange = (event) => {
// console.log(event.target.value);
setMinutes(event.target.value);
};
// 변경될 동작 code
return (
<div>
<h1 className="hi"> Super Converter </h1>
<label htmlFor="minutes">Minutes</label>
<input
value={minutes} // 변하는 state를 넣기
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange} // 변화를 감지하는 onChange
/>
<h4>You want convert minute {minutes}</h4>
<label htmlFor="hours">Hours</label>
<input id="hours " placeholder="Hours" type="number" />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
4. state가 한쪽으로만 event를 작동할 수 있도록 하는 방법
- state에 2가지 (state date, state f)가 존재하지 않으면 일반 html로 작동
- 만약 2가지 중 1개(state data)만 default로 존재하고 function이 존재하지 않으면 event 작동하지 않는다.
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<!-- body 끝 -->
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function App() {
// 변경 조건을 내부에 작성
const [minutes, setMinutes] = React.useState(0); // default로 0을 줌
// getDocument할 필요없이 event로부터 원하는 값을 받아온다.
const onChange = (event) => {
setMinutes(event.target.value);
};
// 변경될 동작 code
return (
<div>
<h1 className="hi"> Super Converter </h1>
<label htmlFor="minutes">Minutes</label>
<input
value={minutes} // 변하는 state를 넣기
id="minutes"
placeholder="Minutes"
type="number"
// onChange={onChange} // 변화를 감지하는 onChange 막아버림
/>
<label htmlFor="hours">Hours</label>
<input id="hours " placeholder="Hours" type="number" />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
- hour에 적용하기
- {minute}을 사용하기때문에 minute에 관한 function은 존재해서 minute input 에는 값을 변경 가능하지만
- hour같은 경우에는 해당 function이 존재하지 않기 때문에 input 값 변경이 불가하다.
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<!-- body 끝 -->
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function App() {
// 변경 조건을 내부에 작성
const [minutes, setMinutes] = React.useState();
// getDocument할 필요없이 event로부터 원하는 값을 받아온다.
const onChange = (event) => {
// console.log(event.target.value);
setMinutes(event.target.value);
};
// 변경될 동작 code
return (
<div>
<h1 className="hi"> Super Converter </h1>
<div>
<label htmlFor="minutes">Minutes</label>
<input
value={minutes} // 변하는 state를 넣기
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange} // 변화를 감지하는 onChange
/>
</div>
<div>
<label htmlFor="hours">Hours</label>
<input
value={minutes}
id="hours "
placeholder="Hours"
type="number"
/>
</div>
</div> // return div 끝
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
- 철자 오류를 정말 조심해야한다.
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<!-- body 끝 -->
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function App() {
// 변경 조건을 내부에 작성
const [minutes, setMinutes] = React.useState();
// getDocument할 필요없이 event로부터 원하는 값을 받아온다.
const onChange = (event) => {
// console.log(event.target.value);
setMinutes(event.target.value);
};
const reset = () => setMinutes(0);
// 변경될 동작 code
return (
<div>
<h1 className="hi"> Super Converter </h1>
<div>
<label htmlFor="minutes">Minutes</label>
<input
value={minutes} // 변하는 state를 넣기
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange} // 변화를 감지하는 onChange
/>
</div>
<div>
<label htmlFor="hours">Hours</label>
<input
value={Math.round(minutes / 60)} // 동적으로 변경되는 부분 전체를 {}로 적용
id="hours "
placeholder="Hours"
type="number"
/>
</div>
<button onClick={reset}>Reset</button>
</div> // return div 끝
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
5. flip -
- 오타는 useState를 userState라고 했는지 잘 확인하기
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<!-- body 끝 -->
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function App() {
// 변경 조건을 내부에 작성
const [minutes, setMinutes] = React.useState();
const [flipped, setFlipped] = React.useState(false);
// getDocument할 필요없이 event로부터 원하는 값을 받아온다.
const onChange = (event) => {
// console.log(event.target.value);
setMinutes(event.target.value);
};
const reset = () => setMinutes(0);
const onFlip = () => setFlipped((current) => !current);
// 변경될 동작 code
return (
<div>
<h1 className="hi"> Super Converter </h1>
<div>
<label htmlFor="minutes">Minutes</label>
<input
value={minutes} // 변하는 state를 넣기
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange} // 변화를 감지하는 onChange
disabled={flipped === true}
/>
</div>
<div>
<label htmlFor="hours">Hours</label>
<input
value={Math.round(minutes / 60)} // 동적으로 변경되는 부분 전체를 {}로 적용
id="hours "
placeholder="Hours"
type="number"
// 현재 hours에 Onchange라는 event가 없기 때문에 hours의 변경이 불가하다.
disabled={flipped === false}
/>
</div>
<button onClick={reset}>Reset</button>
<button onClick={onFlip}>Flip</button>
</div> // return div 끝
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
시간 convert 넣기
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<!-- body 끝 -->
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function App() {
// 변경 조건을 내부에 작성
const [amount, setAmount] = React.useState();
const [flipped, setFlipped] = React.useState(false);
// getDocument할 필요없이 event로부터 원하는 값을 받아온다.
const onChange = (event) => {
// console.log(event.target.value);
setAmount(event.target.value);
};
const reset = () => setAmount(0);
const onFlip = () => {
reset();
setFlipped((current) => !current);
};
// 변경될 동작 code
return (
<div>
<h1 className="hi"> Super Converter </h1>
<div>
<label htmlFor="minutes">Minutes</label>
<input
value={flipped ? amount * 60 : amount} // 변하는 state를 넣기
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange} // 변화를 감지하는 onChange
disabled={flipped}
/>
</div>
<div>
<label htmlFor="hours">Hours</label>
<input
value={flipped ? amount : Math.round(amount / 60)} // 동적으로 변경되는 부분 전체를 {}로 적용
id="hours "
placeholder="Hours"
type="number"
// 현재 hours에 Onchange라는 event가 없기 때문에 hours의 변경이 불가하다.
disabled={!flipped}
onChange={onChange} // 변화를 감지하는 onChange
/>
</div>
<button onClick={reset}>Reset</button>
<button onClick={onFlip}>Flip</button>
</div> // return div 끝
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>