[TIL] 23.03.31

useState

가상 DOM이란?

Document Object Model(DOM)

	DOM	Virtual DOM
HTML 업데이트	직접적으로 변경	직접적으로 변경하지 않음
업데이트 속도	느림	빠름
HTML 엘리먼트 업데이트 방식	새로운 DOM 생성	새로운 가상 DOM 생성 후 이전과 비교하여 바뀐 부분만 업데이트
메모리 효율성	낭비가 심함	비교적 낭비가 덜함

• 리액트에서는 HTML을 직접적으로 접근하는 함수 ex)document.querySelector() 와 같은 기능을 사용하지 않습니다.
• 리액트에서는 상태관리가 중요합니다. (useContext, Redux, SWR …)

useState()를 사용하지 않는 다면?

function App() {
  let noUseState = 0;

  const onClickAdd = () => {
    noUseState += 1;
  };

  return (
    <div className="bg-red-100">
      <div>{noUseState}</div>
      <button onClick={onClickAdd}>+</button>
    </div>
  );
}

export default App;

리액트에서 변수를 사용할 때? useState();

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  const onClickAdd = () => {
    setCount(count + 1);
  };
  const onClickSubstract = () => {
    setCount((prev) => {
      console.log(prev);

      return prev - 1;
    });
  };

  return (
    <div className="bg-red-100">
      <div>{count}</div>
      <button onClick={onClickAdd}>+</button>
      <button onClick={onClickSubstract}>-</button>
    </div>
  );
}

export default App;

useState()를 활용하여 계산기 기능 만들기

https://github.com/ATTIPARK/230331.git