앱의 state를 바꾸는 법
<!DOCTYPE html>
<html lang="en">
<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, setCounter] = React.useState(0);
const onClick = () => {
// setCounter(counter + 1);
setCounter((current) => current + 1);
//아래 방법이 좀 더 정확히 우리가 원하는 값을 더할 수 있어서 안전하다. 위는 값을 직접 지정하는 방법이다.
// state가 어딘가에서 또 변경될 수 있으므로.. 현제 state를 기반으로 계산하고 싶다면 이렇게 함수를 이용하면 된다.
};
return (
<div>
<h3> Total clicks : {counter} </h3>
<button onClick={onClick}>Click me</button>
</div>
);
}
ReactDOM.render(<App />, root);
</script>
</html>
위와 같이 state를 함수를 이용해 만든다면, 다른 곳에서 변경될 수도 있는 state 값을 조금 더 안전하게 변경할 수 있다.
다음 시간에는 unit의 converter를 만들것이다.
converter란, 예를 들어 분(minute)단위를 넣으면 그것을 시간 (hour)단위 로 값을 출력해주는 것이다.
state를 연습할 수 있는 좋은 시간이 될 것이다.
최강 프론트엔드 개발자가 되고싶은 안유진 입니다