react로 쇼핑몰페이지를 만들었었는데 제품의 개수를 더하는 버튼을 누를 때마다, 개수가 올라가게 만들게 하고 싶었다.
근데 자꾸 렌더링이 안되고.. 뭔가 문제가 있었었는데 오늘 해결점을 알았다 *^^*
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
// useState 선언
const [counter, setCounter] = useState(0);
// 버튼을 누르면 counter의 수가 증가
<button onClick={ ()=> setCounter(counter++) }> + </button>
</script>
먼저 const 로 지정을 해주면 안된다. 값이 변경되면, counter++ 이든, ++counter을 해주든 값이 변경이 안됨.
왜냐면 coutner = counter + 1; 이런식으로 값이 재할당되는 것이기 때문에 const가 아닌 let 으로 변수타입을 바꿔하면 적용이 잘되는 걸 볼 수 있다. 또한 버튼을 누르면 counter++ 보다 ++counter으로 적은 코드가 훨씬 빠르게 적용되는 걸 알 수 있다.
이건 왜인지 모르겠다. . 나중에 계산하는 값이라고 판단하고 연산 자체의 순서를 나중으로 빼놓는 건가 싶다. useEffect처럼..?
