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

Coddy React 여정의 기초 (Fundamentals) 섹션에 포함된 레슨. 42개 중 22번째.

지금까지는 모든 것이 고정되어 있었어요. 데이터가 들어오면 페이지가 나왔고, 아무것도 바뀌지 않았죠. 실제 앱은 좋아요 수, 열린 메뉴, 검색창의 텍스트처럼 바뀌는 것들을 기억해요. 이런 기억을 상태라고 해요.

React는 useState 훅을 통해 컴포넌트에 상태를 제공합니다.

import { useState } from 'react';

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

한 줄, 세 가지 구성 요소:

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

황금률: 상태에 직접 값을 할당하지 마세요. count = 5는 오류를 발생시킵니다. count는 const이기 때문입니다. 설령 값이 바뀔 수 있더라도 React는 그 변화를 알지 못합니다. setCount(5)는 상태를 변경하고 컴포넌트를 다시 렌더링합니다. 이 다시 렌더링되는 과정에서 화면이 업데이트됩니다.

직접 해보기

이 레슨에는 코드 챌린지가 없습니다.