상태(State)란 무엇인가요?

지금까지의 모든 것은 정적이었습니다. 데이터가 들어가고 페이지가 나왔으며, 아무것도 변하지 않았습니다. 실제 앱은 좋아요 수, 열린 메뉴, 검색창의 텍스트와 같이 변경되는 항목을 기억합니다. 이러한 기억을 상태(state)라고 부릅니다.

React는 useState 훅을 통해 컴포넌트에 상태를 부여합니다:

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);
    ...
}

한 줄에 세 가지 요소가 있습니다:

• count: 현재 값
• setCount: 값을 변경하는 함수
• useState(0): 시작 값

황금률: 절대 state를 직접 할당하지 마세요. count = 5는 React가 감시하고 있지 않은 변수를 변경합니다. setCount(5)는 state를 변경하고 컴포넌트를 리렌더링합니다. 이 리렌더링이 바로 화면을 업데이트하는 것입니다.