React JS - 02
2023. 8. 15. 23:58ㆍReact JS
SMALL
1. 값이 변화할 때마다 페이지 render 하기
- counter 값을 전달해줘서 나타냄
- onClick 으로 click 이벤트가 발생할 때 'countUp' 함수가 실행 -> count 값 증가
- 그러나 화면이 rerendering 되는 것은 아니어서 화면에 나타나지 않음;
- 그래서 render 함수를 생성해서 click 할 때마다 페이지를 다시 그려내도록 함
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</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">
const root = document.getElementById("root");
let counter = 0;
// counter 값 증가하는 함수
const countUp = () => {
counter++;
console.log(counter);
render();
}
// rendering 함수
function render () {
ReactDOM.render(<Container />, root);
}
const Container= () => (
<div>
<h3>Total clicks : {counter}</h3>
<button onClick={countUp}>click me</button>
</div>
)
render();
</script>
</html>2. 값이 변화할 때마다 페이지를 새로 그림
- React.useState 를 이용해서 값이 변화할 때 자동으로 페이지를 새로고침할 수 있음.
- [변화된 값을 넣을 변수이름, 변수값을 변경할 함수] 형식으로 반환함.
- 즉, 아래코드에서 modifier 는 카운터 값 증가 + rendering 과정을 둘 다 실행하는 것과 같음.
- 근데 counter 값 증가할 때 'counter += 1' 이 아닌 'current => current+1' 로 현재값을 가져와서 그 값을 증가시키는 것이 안정적임.
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</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">
const root = document.getElementById("root");
function App() {
const [counter, modifier] = React.useState(0);
const countUP = () => {
modifier(counter+1);
//setCounter(current => current + 1);
// 현재 state를 바탕으로 다음 state 값을 구하려면 위의 방법이 안정적임
};
return(
<div>
<h3>Total clicks : {counter}</h3>
<button onClick= {countUP}>click me</button>
</div>
);
}
ReactDOM.render(<App />, root);
// useState 를 이용해서 변화된 부분만 업데이트하고 재로딩 가능
</script>
</html>
3. 분(minute)을 시간(hour)으로 변환하는 converter
- useState 를 이용해서 입력한 값 저장
- label click 하면서 input 입력창으로 넘어가도록 하는 거 : 기존의 JS 코드는 for props 를 이용하지만 react 에서는 사용하면 경고가 발생한당. 조심해랑.
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</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">
const root = document.getElementById("root");
function App() {
const [minute, setMinute]=React.useState();
const [hour, setHour]=React.useState();
const onChange= (event)=>{
console.log("somebody wrote");
console.log(event.target.value);
setMinute(event.target.value);
}
return(
<div>
<h1>Super Converter</h1>
<label htmlFor="minutes">Minutes</label>
<input
value={minute}
id="minutes"
placeholder="minutes"
type="number"
onChange={onChange} />
<h2>you want {minute}</h2>
<label for="hours">Hours</label>
<input
value={hour}
id="hours"
placeholder="hours"
type="number" />
</div>
);
}
ReactDOM.render(<App />, root);
// useState 를 이용해서 변화된 부분만 업데이트하고 재로딩 가능
// for 은 javascript 언어이므로 react 에서 사용하면 에러 발생
// for 을 사용하고 싶으면 htmlfor 으로 작성해야 함
// production 버전이라 javascript 도 에러 없이 사용가능하지만 developer 버전으로 사용하면 에러가 발생함
// class 또한 className으로 작성해야하는 것과 같음
// 단위 변환함
</script>
</html>4. 시간에서 분으로 convert & 둘 중 하나만 입력하도록 설정
- flipped 변수를 이용하여 입력 가능한 input 결정
- disabled props 를 통해서 입력 가능/불가능 설정
- value 값 또한 flipped 값에 따라 변환된 값을 나타낼지, 입력받는 값을 나타낼지 결정
- flipped 버튼의 text 내용을 flipped 값에 따라 결정 가능
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</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">
const root = document.getElementById("root");
function App() {
const [amount, setAmount]=React.useState(0);
const [flipped, setFlipped] = React.useState(false);
const onChange= (event)=>{
console.log("somebody wrote");
console.log(event.target.value);
setAmount(event.target.value);
}
const reset = () => setAmount(0);
const onFlipped = () => setFlipped(current => !current);
return(
<div>
<h1>Super Converter</h1>
<label htmlFor="amount">Minutes</label>
<input
value={flipped ? amount * 60 : amount}
id="minutes"
placeholder="minutes"
type="number"
onChange={onChange}
disabled={flipped} />
<h2>you want {amount}</h2>
<label for="hours">Hours</label>
<input
value={flipped ? amount: Math.round(amount/60)}
id="hours"
placeholder="hours"
type="number"
onChange={onChange}
disabled={!flipped} />
<div>
<button onClick={reset}>reset</button>
<button onClick={onFlipped}>{flipped ? "turnback" : "flip"}</button>
</div>
</div>
);
}
ReactDOM.render(<App />, root);
</script>
</html>
이상-
입력값 받고 단위 변환하는 과정까지 마무리-
반응형
LIST
'React JS' 카테고리의 다른 글
| React - css 속성 | background 에 이미지 넣기 (0) | 2024.01.06 |
|---|---|
| React JS - 05 (0) | 2023.08.26 |
| React JS - 04 (0) | 2023.08.22 |
| React JS - 03 (0) | 2023.08.18 |
| React JS - 01 (0) | 2023.08.10 |