상태가 바뀌면 화면이 바뀐다

React에서 state가 왜 중요한지, 상태와 화면의 관계를 이해합니다.

이전 챕터에서 우리가 본 것

카운터 버튼을 눌렀을 때 숫자가 올라갔습니다.
그때 핵심 코드가 이거였죠.

const [count, setCount] = useState(0)

setCount를 호출하니까 화면이 바뀌었습니다.
이번에는 이 동작의 중심에 있는 state를 제대로 이해해 보겠습니다.

state는 그냥 변수가 아닙니다

state는 React가 "이 값이 바뀌면 화면을 다시 그려야 해"라고 등록해 둔 특별한 값입니다.

일반 변수와 비교하면 차이가 바로 보입니다.

// 일반 변수
let count = 0;
count = count + 1; // 값은 바뀌지만 화면은 그대로

// state
const [count, setCount] = useState(0);
setCount(count + 1); // 값이 바뀌고 화면도 따라서 갱신

일반 변수를 바꾸면 자바스크립트 메모리에서는 값이 바뀌지만, React는 그걸 모릅니다.
state를 바꿔야 React가 알아차리고 화면을 다시 그립니다.

state는 React에게 "화면 다시 그려줘"라고 신호를 보내는 값입니다.

왜 DOM을 직접 안 바꾸나요

자바스크립트에서는 이렇게 DOM을 직접 바꿀 수도 있습니다.

document.getElementById('counter').innerText = '1';

작은 화면에서는 이것도 됩니다.
하지만 화면이 복잡해지면 문제가 생깁니다.

버튼 A를 누르면 헤더 텍스트가 바뀌고
동시에 사이드바 색상도 바뀌고
조건에 따라 모달이 열리고...

이걸 전부 DOM을 직접 찾아서 하나씩 바꾸면, 코드가 금세 뒤엉킵니다.
어디서 뭘 바꿨는지 추적이 안 되기 시작합니다.

React의 접근은 다릅니다.
"현재 상태를 알려줘. 그에 맞는 화면은 내가 그릴게."

우리는 상태만 바꾸면 되고, 화면 반영은 React가 책임집니다.

상태에 따라 화면을 선언한다

코드로 보면 바로 감이 옵니다.
아까 만든 카운터에서 "10번 넘게 누르면 메시지를 보여주고 싶다"고 해봅시다.

DOM을 직접 바꾸는 방식이라면 이렇게 해야 합니다.

button.addEventListener('click', () => {
  count = count + 1;
  counterEl.innerText = `count is ${count}`;
  if (count >= 10) {
    const msg = document.createElement('p');
    msg.innerText = '10번 넘게 누르셨네요!';
    document.body.appendChild(msg);
  }
});

요소를 직접 찾고, 직접 만들고, 직접 붙입니다.
조건이 하나만 더 늘어도 코드가 복잡해지는 게 눈에 보입니다.

React에서는 이렇게 씁니다.

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        count is {count}
      </button>
      {count >= 10 && <p>10번 넘게 누르셨네요!</p>}
    </div>
  );
}

여기서는 "어떻게 바꿀지"를 하나도 안 썼습니다.
그냥 count가 10 이상일 때 이 문장이 보여야 한다고 선언만 했습니다.

요소를 만들고 붙이는 건 React가 알아서 합니다.
조건이 더 늘어나도 같은 패턴으로 쭉 나열하면 됩니다.

이게 React에서 말하는 선언형입니다.
"화면을 어떻게 바꿀지" 대신 "상태가 이럴 때 화면은 이래야 한다"만 적는 겁니다.

이 방식이 익숙할 수도 있습니다

사실 이 감각은 자바스프링에서도 이미 쓰고 있습니다.

JPA에서 엔티티 필드 값을 바꾸면 프레임워크가 변경을 감지해서 UPDATE 쿼리를 알아서 만들어줍니다.
우리가 SQL을 직접 쓰지 않아도 됩니다.

React도 같은 구조입니다.
state 값을 바꾸면 React가 변경을 감지해서 화면을 알아서 다시 그려줍니다.
우리가 DOM을 직접 만지지 않아도 됩니다.

상태를 바꾸면 프레임워크가 나머지를 처리한다.
이 감각은 이미 익숙한 겁니다.

정리

state는 React가 지켜보는 특별한 값이다.
state가 바뀌면 React가 화면을 다시 그린다.
우리는 "화면을 어떻게 바꿀지"가 아니라 "상태가 이럴 때 화면은 이래야 한다"만 선언하면 된다.
이 감각이 다음 챕터들의 기반이 된다.

직접 해보기

state를 2개 이상 사용하는 컴포넌트 만들어보기

다음 챕터 예고

상태와 화면의 관계를 잡았으니, 다음에는 배열이나 객체처럼
참조값을 state로 다룰 때 주의할 점을 알아보겠습니다.

다음 문서: 참조값 다루기

상태가 바뀌면 화면이 바뀐다

On this page