배열 관련해서
const x = [1,2,3] 이런 배열이 있다면
기존에는
const a = x[0] ===> 1
const b = x[1] ===> 2
... 으로 했지만
const [a, b, c] = x; 으로도 가능하다. (코드를 짧게 만들 수 있음)
React.useState(우리가 담으려는 data 값, data 값을 바꿀때 사용할 modifier)
modifier(원하는 변경값, 함수) 를 넣으면 업데이트 및 자동적으로 reRender이 된다.
const [a,setA] = React.useState(0);
const onClick = () => {
setA(a + 1);
}만약 버튼이 있고 버튼에 onclick이 적용되어 있다면 클릭 시 자동적으로 숫자가 올라가게 된다.
<!DOCTYPE html>
<html lang="en">
<body>
<span>Total clicks: 0</span>
<button id="btn">Click me</button>
</body>
<script>
let counter = 0;
const btn = document.getElementById("btn");
const span = document.querySelector("span");
function handleClick() {
counter = counter + 1;
span.innerText = `Total clicks: ${counter}`;
}
btn.addEventListener("click", handleClick);
</script>
</html>used Vanilla JS
<!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() {
let [counter, modifier] = React.useState(0);
const onClick = () => {
modifier(counter+1);
}
return
(<div>
<h3>Total clicks: {counter}</h3>
<button onClick={onClick}>Click me</button>
</div>)
}
ReactDOM.render(<App />, root);
</script>
</html>used React JS
const [a,setA] = React.useState(0);
const onClick = () => {
//setA(a + 1);
setA((current) => current + 1);
}같은 결과 값이 나오지만 아래의 함수형식의 setA 결과값이 더 안전하다.
'JavaScript > React JS' 카테고리의 다른 글
| [React JS] Memo (0) | 2022.01.20 |
|---|---|
| [React JS] Props (0) | 2022.01.18 |
| [React JS] state 활용하기2 (0) | 2022.01.16 |
| [React JS] state를 활용 해보기 (0) | 2021.11.16 |
| [React JS] React JS, JSX (0) | 2021.11.13 |
