state란?
데이터가 저장되는 곳
버튼을 클릭하면 클릭수(Total Click)를 화면에 렌더링하기
1. countUp 함수 내에 render 함수를 넣어 버튼을 클릭할 때마다 렌더링 되도록 한다.
function countUp() {
counter++;
render();
}
function render() {
ReactDOM.render(<App />, root);
}이는 렌더링할 요소가 많아질수록 매번 렌더링을 해줘야 한다는 불편함이 있기 때문에 그다지 좋은 방법이 아니다.
2. State를 사용한다.
setCounter를 이용해 컴포넌트를 재생성하여 UI에 렌더 함수를 따로 추가하지 않아도 리렌더링이 가능하다.
{State} 영역만 업데이트 되기 때문에 보다 효율적인 방법이다.
function App() {
const [counter, setCounter] = React.useState(0);
const onClick = () => {
setCounter(counter + 1);
//리렌더링의 역할(컴포넌트 업데이트)
};
return (
//컴포넌트
<div>
<h3> Total clicks : {counter} </h3>
<button onClick={onClick}> Click me </button>
</div>
);
}
ReactDOM.render(<App />, root);<h1 className="hi"> Super Converter </h1>
<label htmlFor="hours"> Hours </label>JSX에서는 class(x) clasName(O) / for(x) htmlFor(O)
<input
value={flipped ? amount * 60 : amount}
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange}
disabled={flipped}
/>
- 삼항연산자 : flipped(default:false)가 true라면 flipped가 한 번 눌러졌다는 이야기, 즉 hours를 입력하고 그것을 분 단위로 바꿔야 한다.
- disabled : true이면 해당 input에는 입력할 수 없다.
- onChange : input에 변화가 생기면(사용자가 input에 값을 입력할 때) onChange 함수가 실행된다.
- event.target.value를 얻게 되는데 바로 input의 value이다.
- 한 컴포넌트 안에서 다수의 컴포넌트를 렌더링할 수 있다.
- 컴포넌트는 무조건 대문자로 시작해야 한다 잊지말기
<body>
<div id="root"></div>
</body>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/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) => {
setAmount(event.target.value);
};
const reset = () => setAmount(0);
const onFlip = () => {
reset();
setFlipped((current) => !current);
}
return (
<div>
<h1 className="hi">Super Converter</h1>
<div>
<label htmlFor="minutes">Minutes</label>
<input
value={flipped ? amount * 60 : amount}
id="minutes"
placeholder="Minutes"
type="number"
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"
disabled={!flipped}
onChange={onChange}
/>
</div>
<button onClick={reset}>Reset</button>
<button onClick={onFlip}>Flip</button>
</div>
);
}
ReactDOM.render(<App/>, root);
</script>
💻 Hello world