[React] useState() 알아보기

State는 상호작용의 결과로 화면의 결과나 상태가 변하는 동적인 값이라고 합니다.

| useState

리액트에서는 useState를 사용하여 동적인 값을 나타낼 수 있고

import { useState } from "react";

이런 식으로 import 해 온다음 사용하면 됩니다.

 

값을 저장하려면

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

이런 식으로 사용하면 되는데

여기서 앞에 있는 count는 변수 명이고

setCount는 변수의 값을 바꿀 수 있는 함수입니다.

import { useState } from 'react';

export default function Counting() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }
  
  return (
    <>
      <button onClick={()=>{handleClick()}}>count</button>
      <p>{count}</p>
    </>
  );
}

이런 식으로 작성하면 버튼을 클릭하면 화면의 렌더링 되는 count 숫자가 1씩 증가합니다.

 

import { useState } from 'react';

export default function DetailPage() {
  const [detail, setDetail] = useState(false);

  function handleClick() {
    setDetail(!detail);
  }

  return (
    <>
      <button onClick={handleClick}>
        {detail ? 'Hide' : 'Show'} details
      </button>
      {detail && <p>detail page</p>}
    </>
  );
}

또한 이런 식으로 만들어서 페이지를 보이게 했다 안 보이게 했다 할 수도 있습니다.