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 (

<>

{detail ? 'Hide' : 'Show'} details

</button>

{detail && <p>detail page</p>}

</>

);

}

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

[React] useState() 알아보기