React에서 상태 사용하기

useState 함수를 이용하여 제품 이름을 담은 상태를 생성해 보겠습니다:

const state = useState('prod');

결과적으로 상수 state는 배열이 되며, 첫 번째 요소에는 제품 이름이 저장되고, 두 번째 요소에는 이름을 변경하는 함수가 저장됩니다:

const state   = useState('prod');
const name    = state[0];
const setName = state[1];

간결함을 위해 일반적으로 배열을 위한 중간 상수를 사용하지 않고, 구조 분해 할당을 사용합니다:

const [name, setName] = useState('prod');

이제 제품 이름 상태를 어떤 마크업에 출력해 보겠습니다:

return <p>
	<span>{name}</span>
</p>;

모든 것을 합치면 다음과 같은 코드가 됩니다:

import React, { useState } from 'react';

function App() {
	const [name, setName] = useState('prod');
	
	return <div>
		<span>{name}</span>
	</div>;
}

export default App;

이 코드를 실행하면, 처음에는 div에 상태의 초기 값, 즉 우리의 경우 'prod'가 출력됩니다. setName 함수를 통해 상태를 변경하면 마크업에 자동으로 상태의 새로운 값이 나타납니다.

화면에 사용자 데이터를 표시하려 한다고 가정해 보세요: 이름, 성, 나이. 이를 위해 해당 상태들을 초기 값과 함께 생성하세요.