리액트, useState를 사용해서 브라우저 값 변경하기

리액트는 VirtualDom을 사용하여 바뀐 요소들을 브라우저에 표시합니다.

때문에 직접적인 Dom접근은 권장하지 않죠.

 

리액트에서 사용하는 VirtualDOM에 대해 알아보자

위 글을 보면 알 수 있듯이 리액트는 VirtualDom에서 먼저 변경한 후 Dom의 값을 바꿔줍니다.

때문에 VirtualDom에서 값이 변경됐다는 신호를 받아야만 렌더링이 시작된다고 말할 수 있습니다.

 

직접적으로 Dom을 조작한다면? - VirtualDom에서 값이 변경됐다는 신호가 없었기 때문에 리렌더링이 진행되지 않습니다.

 

위와 같은 이유때문에 직접적인 Dom조작은 올바르지 않은 사용법이죠.

우리가 useState를 알아야하는 이유입니다.

리액트를 사용하기 위한 기본적인 기능이며 useState를 이해한다면 리액트의 전반적인 흐름을 알 수 있기 때문에 꼭 알아야하는 내용입니다.

 

App.tsx

import { useState } from "react";
import logo from "./logo.svg";
import "./App.css";

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

  const decrease = () => {
    setCount(count - 1);
  };

  const increase = () => {
    setCount(count + 1);
  };

  return (
    <div className="container">
      <div className="box">
        <button onClick={decrease}>{`-`}</button>
        <h1>{`${count}`}</h1>
        <button onClick={increase}>{`+`}</button>
      </div>
    </div>
  );
}

export default App;

App.css

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  height: auto;
  display: flex;
}

h1 {
  margin: 10px;
}

button {
  margin: 10px;
}

import { useState } from 'react';

를 통해 useState를 불러오고

 

const [count,setCount] = useState(0)

을 통해 변수를 선언해줍니다.

 

increase함수를 선언해 setCount로 count를 1증가시키는 함수를 만들고

decrease함수를 선언해 setCount로 count를 1감소시키는 함수를 만들었습니다.

 

각각 버튼에 클릭이벤트로 입력해줍니다.

 

다음 글에선 부모에 있는 useState를 하위 컴포넌트로 보내는 방법에 대해 알아보겠습니다.