useState없이 직접 DOM을 조작하는 방법
단점 : 모든 상태마다 ID를 설정해줘야 하므로 복잡한 페이지일수록 사용하기 어렵다.
export default function CounterLetDocumentPage() {
function onClickCountUp() {
const count = Number(document.getElementById("qqq").innerText) + 1;
document.getElementById("qqq").innerText = count;
}
function onClickCountDown() {
const count = Number(document.getElementById("qqq").innerText) - 1;
document.getElementById("qqq").innerText = count;
}
return (
<div>
<div id="qqq">0</div>
<button onClick={onClickCountUp}>카운트 올리기!</button>
<button onClick={onClickCountDown}>카운트 내리기!</button>
</div>
);
}
useState 상태변수 사용하기
ID관리 없이 간편하게 상태를 관리할 수 있다
import { useState } from "react";
export default function CounterLetDocumentPage() {
const [count, setCount] = useState(0);
function onClickCountUp() {
setCount(count + 1);
}
function onClickCountDown() {
setCount(count - 1);
}
return (
<div>
<div id="qqq">{count}</div>
<button onClick={onClickCountUp}>카운트 올리기!</button>
<button onClick={onClickCountDown}>카운트 내리기!</button>
</div>
);
}
useState를 이용한 상태변수가 아니라 일반 let, var 로 선언한 변수는 안될까 ??
변수를 사용하게 되면 변수의 값이 바뀌어도 리액트가 변경을 감지하지 못하고, 그래서 리렌더링 요청을 하지 않기 때문에 화면에 변경사항이 나타나지 않게 된다.
728x90
'Frontend 프론트엔드' 카테고리의 다른 글
[ 12 ] 데이터 통신 실습 (0) | 2024.06.11 |
---|---|
[ 11 ] 웹의 데이터 통신 (1) | 2024.06.11 |
[ 9 ] 리액트와 컴포넌트 feat. 함수형 컴포넌트 와 클래스형 컴포넌트 (0) | 2024.06.09 |
[ 8 ] JWT (0) | 2024.04.01 |
[ 7 ] 로그인 처리 과정 (0) | 2024.04.01 |