03.31

2023.03.30일(목)

REACT

Usestate

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;

리액트에서 변수를 변하게하려면?

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;

Component

src폴더에 component폴더 생성 후
각각의 Div에 대한 관리를 더 편리하게 하기위한 요소
생성 후 import해주어야 하고 </A>를 통해 실행가능