React란 무엇인가요?

클릭 횟수를 세는 버튼이 있는 페이지는 매번 클릭할 때마다 그 숫자를 동기화 상태로 유지해야 합니다. 순수 JavaScript에서는 버튼의 텍스트 노드를 가져와서 클릭 리스너를 추가한 다음, 누군가 클릭할 때마다 그 숫자를 직접 업데이트합니다. 검색 필터, 장바구니 합계, 열고 닫는 모달을 추가하면, 이제 코드 전체에 수동 업데이트가 흩어져 있고, 페이지의 다른 곳에서 데이터가 바뀔 때마다 버그가 숨어들 수 있는 자리가 생깁니다.

React는 컴포넌트로 사용자 인터페이스를 만드는 JavaScript 라이브러리이며, 이런 수동 관리 작업을 대신 처리합니다. 이 장에서는 그것이 실제로 무엇을 의미하는지 살펴봅니다. React 뒤의 핵심 개념, React가 어디서 실행되는지, 그리고 React를 배우기 시작할 때 나오는 라이브러리와 프레임워크의 차이에 어떻게 부합하는지를 다룹니다.

컴포넌트와 핵심 개념

같은 클릭 카운터를 React 컴포넌트로 작성한 것이 여기 있습니다:

import { useState } from 'react'

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

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  )
}

이 예제에는 아직 배우지 않은 몇 가지가 들어 있습니다. return 안의 마크업은 JSX, useState는 훅, onClick은 이벤트 핸들러입니다. Components와 JSX 장에서 그 마크업을 다루고, State 장에서 useState를 전부 다루고, Events 장에서 onClick을 다루므로 지금은 문법을 믿고 개념의 흐름만 따라가세요.

count는 state입니다. Counter가 반환하는 JSX는 그 state에 대해 버튼이 어떻게 보여야 하는지를 설명합니다. 버튼을 클릭하면 setCount를 호출해서 count를 업데이트하고, React가 버튼을 다시 렌더링해서 일치시킵니다. 버튼의 텍스트에 직접 손을 대지 않습니다. 새로운 값에 대해 다시 설명하면 React가 페이지에서 무엇이 바뀌었는지 알아냅니다.

이것이 모든 React 컴포넌트 아래에 있는 핵심 개념입니다. 여러분의 데이터(보통 state라고 부르는)의 함수로 UI를 설명하면, React가 DOM을 업데이트해서 그에 맞춰줍니다. **컴포넌트**는 UI의 일부를 반환하는 함수이고, 앱은 컴포넌트들의 트리로 조합되어, 모두 위의 카운터처럼 같은 방식으로 작동합니다.

정확하게 짚고 넘어갈 가치가 있는 대비는 선언적 대 명령형입니다. 명령형 코드, 순수 DOM 조작은 단계를 명시합니다. 이 요소를 찾고, 텍스트를 바꾸고, 이 클래스를 추가합니다. 선언형 코드, 컴포넌트가 반환하는 것은 최종 상태를 명시합니다. 이 데이터가 주어지면, 버튼이 이렇게 보여야 합니다. React가 그 사이의 단계를 수행합니다.

그 단계들은 virtual DOM을 거칩니다. Virtual DOM은 여러분의 컴포넌트가 반환하는 것에서 React가 빌드하고 이전 버전과 비교하고 필요한 실제 DOM 변경의 최소 세트를 알아내기 위해 사용하는 가벼운 메모리 내 UI 표현입니다. 이것은 존재하고, 지금은 놔두어도 괜찮습니다. 여러분은 이것을 만들거나, 읽거나, 직접 관리하지 않습니다. 이것은 "DOM을 일치시키기" 부분의 React의 내부 메커니즘입니다.

이 핸드북의 나머지를 위해 붙들고 있을 만한 정신 모델이 남습니다. UI = f(state). 컴포넌트는 그 데이터의 함수이고, 훅, 다시 렌더링, effect는 모두 이 하나의 개념 위에 만들어집니다. 나중에 별개의 React 개념으로 보이는 대부분은 실제로 이것의 결과입니다.

React가 실행되는 곳

React는 주로 브라우저에서 실행되어 컴포넌트를 DOM에 렌더링합니다. 이 핸드북은 이 환경에서 처음부터 끝까지 머물러 있습니다.

React의 컴포넌트 모델은 특정적으로 DOM에 묶여 있지 않습니다. 다른 렌더러들이 같은 모델을 다른 대상에 연결합니다. 가장 잘 알려진 예는 React Native로, React의 컴포넌트와 state 모델을 웹 페이지 대신 네이티브 모바일 인터페이스를 만드는 데 사용합니다. 여기서 언급되는 이유는 그 이름이 나중에 놀라움이 되지 않도록 하기 위함입니다. 이를 가르치는 것은 이 핸드북의 범위를 벗어납니다.

라이브러리인가요, 프레임워크인가요?

React는 UI를 렌더링합니다. 라우팅을 제공하지 않고, 데이터 로드 방식을 정하지 않으며, 서버 렌더링을 처리하지 않습니다. 이런 것들은 여러분이 직접 선택하고, 보통 다른 도구를 함께 가져와서 처리합니다. React가 라이브러리가 아닌 프레임워크로 분류되는 실질적 이유가 바로 이것입니다. 한 가지 일을 잘 하고 나머지는 여러분에게 맡기는 방식으로, 프레임워크처럼 전체 앱을 소유하지 않습니다.

프레임워크의 종류에서 이 차이를 전부 다루고, React가 Next.js 같은 것 옆에 어디에 있는지 포함합니다.

Junostate의 함수로서의 UI React 전체는 한 가지 습관으로 축약됩니다. 여러분이 가진 데이터에 대해 화면이 어떻게 보여야 하는지 설명하고, React가 그것을 변경하도록 하세요. 페이지에 들어가서 손으로 편집하지 말고, 어떻게 보여야 할지 말하면 React가 따라갑니다. 브라우저든 React Native 같은 곳이든 어디서 실행되든, 그것은 나중의 세부 사항입니다. 지금은 습관이 중요합니다.

Junostate의 함수로서의 UI state의 함수로서 컴포넌트를 작성하는 습관을 만드세요. 이 데이터가 주어지면 이것을 렌더링합니다. 버튼의 클릭 횟수든 전체 페이지든 매번 하는 것이 바로 이것입니다. React가 DOM 업데이트를 처리해서 여러분이 손으로 작성할 필요가 없고, 프레임워크가 아닌 라이브러리로 부르는 것이 정확합니다. UI를 렌더링하고 라우팅, 데이터 로드, 렌더링 전략은 여러분에게 맡깁니다.

Junostate의 함수로서의 UI 다음에 오는 모든 것에 대한 프레임으로 UI = f(state)를 유지하세요. 컴포넌트는 데이터의 함수이고, virtual DOM은 한 렌더링을 다음 DOM 변경 세트로 바꾸기 위한 React의 자체 기록이며, 명령형보다 선언형이 여기서 나은 이유는 여러분이 스스로 업데이트 단계를 추적하지 않기 때문입니다. 그것이 프레임워크가 아닌 라이브러리로 분류되는 이유입니다. 렌더링에서 멈추고 라우팅, 데이터 가져오기, 서버 렌더링은 여러분이 그것과 페어를 이루는 것에 맡깁니다.

다음: 역사와 버전 - React가 여기까지 온 방법과 각 릴리스에서 무엇이 바뀌었는지를 다룹니다.