전영호의 개발 블로그

useState 란?

리엑트의 useState 는 함수형 컴포넌트에서 상태를 관리하기 위한 Hook 중 하나

1. useState 를 import

import { useState } from 'react';
// useState 를 사용하기 위해선 react 에서 제공하는 useState 를 import!!

2. State 변수를 선언 및 사용

import { useState } from 'react';

function Example() {
	// like 는 사용 변수, setLike 는 State 변경 함수
	let [like, setLike] = useState(0);

	return (
            <div>
                <p onClick = { () => {
                        setLike(like + 1); // useState 변경 함수 사용하여 값을 변경
                }}>좋아요👍🏻 {like}</p> // useState 변수 사용
            </div>
    	);
}

useState 변수를 사용해 저장된 State 값을 꺼내서 사용하고, 변경 함수를 사용하여 State 에 저장된 값을 변경한다.

useState 는 component 를 띄우거나 띄우지 않거나 등 상태를 변경하는데 사용된다.