[ 10 ] useState 없이 직접 DOM 조작하기, useState사용하기

 

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 로 선언한 변수는 안될까 ?? 

 

 변수를 사용하게 되면 변수의 값이 바뀌어도 리액트가 변경을 감지하지 못하고, 그래서 리렌더링 요청을 하지 않기 때문에 화면에 변경사항이 나타나지 않게 된다.