📂 투데이 핫브레인 주제

H.wang(황유림)의 React useState 완벽 해부학

@아티클 영감 얻은 moment:

/리액트의 State는 두더지에게 불어넣는 ‘생명력’과 같다/

출처: 황유림 [3주차 React연습과제(두더지게임)]

//[핵심코드1]: 설정
const [timeLeft, setTimeLeft] = useState(15.0); //남은시간(숫자)
const [score, setScore] = useState(0);           //점수(숫자)
const [moles, setMoles] = useState(Array(4).fill('empty')); //구멍상태(배열)
const [isActive, setIsActive] = useState(false); //게임진행여부(불리언)

//[핵심코드2]: 이전상태 참조하며 업데이트
setMoles((currentMoles) => {
              let updatedMoles = [...currentMoles]; //기존배열복사(불변성유지)
              if (updatedMoles[randomIndex] !== 'hit') {
                updatedMoles[randomIndex] = 'empty';
              }
              return updatedMoles; //새로운상태를 반환하며 화면 업데이트
            });

//[핵심코드3]: 부모의 상태를 자식에게 전달
<StatusBoard
          timeLeft={timeLeft.toFixed(1)}
          score={score}
          successCount={successCount}
          failCount={failCount}
        />
        <MoleGrid moles={moles} onMoleClick={targetClick} />

이번 과제를 진행하다보니.. 저는 리액트 상태(State)의 원리를 이해하느라 뇌에 과부하가 걸렸습니다.

01. Intro: 변수면 변수지, 왜 '상태'라고 부를까?

우리가 자바스크립트에서 쓰던 let a = 10; 같은 일반 변수는 값이 바뀌어도 화면이 꿈쩍도 하지 않습니다. 리액트라는 까다로운 아이는 “내가 감시하고 있는 전용 변수(State)가 바뀔 때만, 화면을 새로 그려줄 거야!" 라고 선언했기 때문이죠.

도대체 useState가 뭐길래 우리를 이토록 힘들게 할까요? 리액트의 심장, 상태 관리의 핵심을 지금부터 낱낱이 해부해 드립니다.

02. useState는 집안의 '스마트 컨트롤러'다!

집 구조(HTML/컴포넌트)는 바뀌지 않지만, 컨트롤러의 설정값(State)에 따라 조명이 켜지거나 에어컨이 작동하듯, 리액트 또한, 상태에 따라 UI를 실시간으로 업데이트합니다.

[리액트 상태 관리의 핵심 개념]