-
[ReactJS] State, setState _영화 웹 서비스 만들기JavaScript/React 2022. 11. 17. 22:55728x90반응형
1. 클릭 수 세기 -> 바닐라JS, 리액트JS로 각각 구현
vanilla.html
<!DOCTYPE html> <body> <span>Total Clicks: 0</span> <button id="btn">Click me</button> </body> <script> let counter = 0; const button = document.getElementById("btn"); const span = document.querySelector("span"); function handleClick() { counter = counter + 1; span.innerText = `Total Clicks: ${counter}`; } button.addEventListener("click", handleClick); </script> </html>react.js
const root = document.getElementById("root"); function Add() { 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);2. React.useState()
state를 바꾸는 두 가지 방법
1. 직접 설정
const [counter, setCounter] = React.useState(0); // 1) 직접 설정 setCounter(45);2. 함수 설정
const [counter, setCounter] = React.useState(0); // 2) 함수 설정 // 1 setCounter( counter + 1 ); // 2 (권장) setCounter((current) => current + 1);1 과 2 는 완전히 같은 방식이다.
2를 권장하는 이유는 현재값이 current라는 것을 보장하기 때문에 다른 어딘가에서 counter 값이 업데이트 되었을 가능성을 배제해 준다.
LIST'JavaScript > React' 카테고리의 다른 글
[ReactJS] 깃헙 배포하기 _영화 웹 서비스 만들기 (0) 2022.11.21 [ReactJS] useEffect _영화 웹 서비스 만들기 (0) 2022.11.21 [ReactJS] CRA _영화 웹 서비스 만들기 (0) 2022.11.19 [ReactJS] Props 실습 _영화 웹 서비스 만들기 (0) 2022.11.19 [ReactJS] Props _영화 웹 서비스 만들기 (0) 2022.11.19