state(App 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체)에 대해 배웠다. 계속 연습해보자. 사용자들의 input을 어떻게 얻는지, form 만들었을 때 state는 어떤 방식으로 작용하는지 등을 배우고 알아보자.
먼저 앱의 state를 바꾸는 방법을 알아보자.
앱의 state 바꾸는 두 가지 방법
1. setCounter를 이용해서 직접 원하는 값 설정하기
setCounter(원하는 값)
2-1. 현재 state를 기반으로 다음 state 값 계산하기
setCounter(기본 값 + 1)
카운터라고 설정한 현재 스테이트를 사용해서 다음 스테이트를 위한 계산을 하고 있다.
카운터는 다른 곳에서도 업데이트 될수 있기 때문에 우리가 생각했던 값이 아닐 수 있어서 그렇게 좋은 방법은 아니다. 이전 단계의 state를 이용해서 현재 state를 바꾸려 했지만, 결과가 예상과 다르게 나올 수!도! 있다.
2-2. 현재 state를 기반으로 다음 state 값 계산하는 더 좋은 방법: 🔥 함수 전달하기
setCounter(함수)
이렇게하면 함수의 return 값이 새로운 state가 되도록 설정할 수 있다.
setCounter((current) => current + 1 );2-1, 2-2번 모두 현재의 state를 가지고 새로운 값을 계산해 내지만, 2번째 방법이 1번째 방법보다 더 안전하다.
왜냐하면 2-2 방법 처럼 함수를 사용하면 리액트가 이 current가 확실히 현재 값을 보장하기 때문에 정확히 원하는 값으로 버그 없이 계산할 수 있다.
<!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");
const App = () => {
const [counter, setCounter] = React.useState(0);
const onClick = () => {
setCounter((current) => current + 1);
};
return (
<div>
<h3>Total clicks: {counter}</h3>
<button onClick={onClick}>Click me</button>
</div>
);
};
ReactDOM.render(<App />, root);
</script>
</html>
Always have hope🍀 & constant passion🔥