React는 무엇을 해결하는가

React를 배우기 전에 알아야 할 게 있다. React가 없던 시절에 무엇이 힘들었는가.

문제를 모르면 해답이 왜 그렇게 생겼는지 알 수 없다. 그래서 첫 강의는 React 코드를 거의 쓰지 않는다.

버튼 하나를 만들어본다

장바구니에 담긴 개수를 보여주고, 버튼을 누르면 하나씩 늘어난다. 순수 자바스크립트로 쓰면 이렇다.

let count = 0;

const button = document.querySelector("#addBtn");
const badge = document.querySelector("#badge");
const total = document.querySelector("#total");

button.addEventListener("click", () => {
  count++;
  badge.textContent = count;
  total.textContent = `${count}개`;
});

동작한다. 그런데 여기 숨은 문제가 있다.

count를 바꿀 때마다 화면을 고치는 코드를 직접 써야 한다. 그리고 count를 쓰는 자리가 늘어날수록 고칠 곳도 늘어난다.

어긋나기 시작한다

여기에 "비우기" 버튼을 추가한다고 하자.

clearButton.addEventListener("click", () => {
  count = 0;
  badge.textContent = count;
  // total 을 고치는 걸 잊었다
});

count는 0인데 화면에는 아직 3개라고 적혀 있다. 데이터와 화면이 어긋났다.

이런 버그는 조용하다. 에러도 안 나고, 테스트에도 잘 안 잡힌다. 화면 요소가 스무 개쯤 되면 어디를 빠뜨렸는지 찾기도 어렵다.

명령형과 선언형

지금 쓴 코드는 어떻게 할지를 하나하나 지시한다.

두 가지 방식

명령형

How — 어떻게 할지 지시

"뱃지를 찾아서 3으로 바꿔라"
"합계를 찾아서 3개로 바꿔라"
화면을 고치는 순서를 다 적는다
빠뜨리면 어긋난다

선언형

What — 어떤 모습인지 서술

"개수가 3이면 화면은 이렇게 생겼다"
고치는 방법은 말하지 않는다
화면은 결과일 뿐이다
어긋날 자리가 없다

식당에 비유하면 명령형은 주방에 들어가 요리 순서를 지시하는 것이고, 선언형은 자리에 앉아 "김치찌개 주세요"라고 말하는 것이다. 어떻게 만드는지는 알 바 아니다.

React 의 답

React는 딱 하나를 약속한다.

화면은 상태의 결과다. 수식으로 쓰면 이렇다.

UI = f(state)

state지금의 데이터
컴포넌트 함수데이터로 화면을 그린다
화면결과물

자바스크립트 편 10강에서 함수는 인자를 받아 값을 반환한다고 배웠다. 컴포넌트는 상태를 받아 화면을 반환하는 함수다.

위의 장바구니를 React로 쓰면 이렇게 된다.

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

  return (
    <div>
      <span>{count}</span>
      <p>{count}개</p>
      <button onClick={() => setCount(count + 1)}>담기</button>
      <button onClick={() => setCount(0)}>비우기</button>
    </div>
  );
}

badge.textContent도, total.textContent도 없다. 화면을 고치는 코드가 한 줄도 없다.

setCount(0)으로 상태만 바꾸면 React가 화면을 다시 그린다. count를 쓰는 자리가 스무 개여도 상관없다. 빠뜨릴 수가 없다.

비우기 버튼을 눌렀을 때

01
상태를 바꾼다
화면은 건드리지 않는다. 데이터만 손댄다.
```
setCount(0);
```
02
React 가 알아챈다
상태가 바뀌었으니 이 컴포넌트를 다시 실행한다.
03
함수가 새 화면을 반환한다
count 가 0 인 버전의 화면이 만들어진다.
04
React 가 바뀐 곳만 고친다
전부 다시 그리는 게 아니다. 어떻게 하는지는 14강 가상 DOM 에서 본다.

컴포넌트 — 두 번째 아이디어

React의 또 다른 축이다. 화면을 재사용 가능한 조각으로 나눈다.

HTML만 쓰던 시절, 카드 열 개를 만들려면 같은 마크업을 열 번 복사했다. 디자인이 바뀌면 열 군데를 고쳐야 했다.

화면을 조각으로 나눈다

ProductCard를 한 번 만들면 데이터만 바꿔 여러 번 쓴다. 고칠 일이 생기면 한 곳만 고친다.

무엇을 얻고 무엇을 잃나

React가 만능은 아니다. 정직하게 짚고 간다.

얻는 것	잃는 것
데이터와 화면이 절대 어긋나지 않는다	배울 것이 늘어난다
컴포넌트를 재사용한다	빌드 도구가 필요하다
큰 화면도 조각으로 나눠 관리한다	작은 페이지에는 과하다
생태계가 크다	선택지가 많아 혼란스럽다

버튼 하나 있는 소개 페이지라면 순수 자바스크립트가 낫다. 상태가 많고 화면이 복잡할수록 React가 유리해진다.

정리하면

순수 자바스크립트는 데이터를 바꾸는 일과 화면을 고치는 일이 따로 논다. 사람이 손으로 맞춰야 하고, 반드시 빠뜨린다.
React는 선언형이다. 화면을 어떻게 고칠지가 아니라, 상태가 이럴 때 화면이 어떤 모습인지를 적는다.
UI = f(state). 상태를 바꾸면 React가 화면을 맞춘다.
화면을 컴포넌트로 나눠 재사용한다.
작고 단순한 페이지에는 과하다. 상태가 많을수록 유리하다.

다음 강의에서는 실제로 React 프로젝트를 만들고 첫 컴포넌트를 화면에 띄운다.

디코드랩

React는 무엇을 해결하는가

Article

버튼 하나를 만들어본다

어긋나기 시작한다

명령형과 선언형

명령형

선언형

React 의 답

상태를 바꾼다

React 가 알아챈다

함수가 새 화면을 반환한다

React 가 바뀐 곳만 고친다

컴포넌트 — 두 번째 아이디어

무엇을 얻고 무엇을 잃나

정리하면