useState 함수의 인자에는 상태의 초깃값을 넣어 줍니다. 클래스형 컴포넌트에서의 state 초깃값은 객체 형태를 넣어 주어야 한다고 배웠는데요. useState에서는 반드시 객체가 아니어도 상관없습니다. 값의 형태는 자유입니다. 숫자일 수도, 문자열일 수도, 객체일 수도, 배열일 수도 있습니다.

함수를 호출하면 배열이 반환되는데요. 배열의 첫 번째 원소는 현재 상태이고, 두 번째 원소는 상태를 바꾸어 주는 함수입니다. 이 함수를 세터(Setter) 함수라고 부릅니다. 그리고 배열 비구조화 할당을 통해 이름을 자유롭게 정해 줄 수 있습니다. 현재 message와 setMessage라고 이름을 설정해 주었는데요. text와 setText라고 이름을 자유롭게 바꾸어 주어도 상관없습니다.

한번 Say 컴포넌트를 App에서 렌더링해 보고 입장 버튼과 퇴장 버튼을 눌러 보세요.

App.js

import React from 'react';
import Say from './Say';
 
const App = () => {
  return <Say />;
};
 
export default App;

---

 

▲ 그림 3-14 useState 사용하기

 

문구가 잘 보이나요?