useState의 기본 형태

const [원하는변수명, set원하는변수명] = useState(초기값) 소괄호 안에는 문자열, 숫자 null, undefined 중에 들어가게 된다.

useState의 형태를 보면 구조분해할당 의 형태로 작성되어 있다.

예제 코드 1

const [number, setNumber] = useState(0);

const numberState = useState(0);
const number = numberState[0];
const setNumber = numberState[1];

풀어 쓴다면 이러한 구조로 되어있고, 구조분해할당에 대한 설명은 여기에 포스팅 해 두었다.

useState 왜 사용할까?

리액트 컴포넌트는 앞쪽에 화면이 보이는 부분 과 뒷쪽에 데이터를 관리하는 부분 으로 나뉜다. 간단히 말해 JS의 변수 let을 사용하여 숫자를 +1 시켜도 데이터의 값은 변경이 되었지만 화면에는 적용이 되지 않는 것이다.(변경된 값이 렌더링이 되지 않았기 때문에 보여지지 않는 것)

하지만, state를 사용하여 화면에 그리고, setState()를 사용해서 변경하면 setState() 안에서 렌더링을 새로 하라는 명령이 실행되어 화면을 다시 새로 그리게 되므로 값이 변경되는 것을 화면에서 볼 수 있는 것이다.

예제 코드 2

export default function CountPractice() {
	let count = 0 // let을 사용하여 JS변수 사용
    
    const countUp = () => {
    	count = count + 1 // 함수는 실행되지만, 화면에는 적용이 되지 않음.
    }
    
    return (
    	<div>
      		<h3>{count}</h3>
      		<button onClick={countUp}>누르면증가해요</button>
      	</div>
    )
}

예제 코드 3

import { useState } from 'react'

export default function CountPractice() {
	const [count, setCount] = useState(0) // state로 컴포넌트 변수 생성
    
    const countUp = () => {
    	setCount(count + 1) // 코드가 실행되며, 함수가 작동할 때 마다 새로 화면이 그려짐.
    }
    
    return (
        <div>
            <h1>{count}</h1>
            <button onClick={countUp}>누르면증가해요</button>
        </div>
    )
}

이와같이 useState를 활용하여 동적인 페이지를 보여줄 수 있게 되는 것이다.