React 렌더링의 입력: 컴포넌트는 무엇으로 다음 UI를 계산하는가

30초 요약

함수 컴포넌트는 React가 다음 사용자 인터페이스(User Interface, UI) 조각을 계산하기 위해 실행하는 자바스크립트 함수다. 이 글에서 렌더링은 React가 그 함수를 실행해 다음 UI를 계산하는 과정까지만 뜻한다. 계산 결과를 실제 화면에 반영하는 단계는 2편에서 분리한다.

함수 컴포넌트가 렌더링 중 읽을 수 있는 React 입력의 종류에는 props · state · context가 있다. 각 컴포넌트는 이 가운데 필요한 입력만 읽는다. JSX는 자바스크립트 파일 안에서 다음 UI 모양을 표현하는 문법 확장이다. 기억할 질문은 “이 값이 바뀌는가?” 하나가 아니라 다음 세 가지다.

1. 부모가 소유하고 자식에게 전달하는 값인가?
2. 한 컴포넌트가 사용자 동작 사이에 기억해야 하는 값인가?
3. 트리의 넓은 범위에서 같은 설정을 읽어야 하는가?

답에 따라 props, state, context를 고른다. 화면에 보여야 할 값을 파일 바깥의 일반 변수에 두고 직접 바꾸면 값은 달라져도 React에 새 화면 계산을 요청하지 못한다.

이 글을 관통하는 상황: 수량은 바뀌었는데 합계는 그대로다

상품 단가는 부모가 서버 응답에서 받아 자식에게 전달하고, 사용자는 주문 요약에서 수량을 늘릴 수 있다고 하자. 통화 단위는 결제 화면 전체에서 같은 값을 사용한다.

처음 구현은 수량을 파일 바깥의 일반 변수에 둔다.

let quantity = 1
 
function OrderSummary({ unitPrice }) {
  function handleAdd() {
    quantity += 1
  }
 
  return (
    <section>
      <p>수량: {quantity}</p>
      <p>합계: {unitPrice * quantity}원</p>
      <button type="button" onClick={handleAdd}>수량 추가</button>
    </section>
  )
}

버튼을 누르면 quantity 값 자체는 바뀐다. 하지만 React에는 화면을 다시 계산하라는 요청이 전달되지 않는다. 사용자는 버튼을 눌렀는데도 수량과 합계가 그대로인 화면을 본다. 나중에 부모의 다른 상태가 바뀌어 우연히 다시 렌더링되면 수량이 갑자기 건너뛴 것처럼 나타날 수도 있다.

이 실패를 “버튼 이벤트가 실행되지 않았다”로만 조사하면 원인을 놓친다. 개발자 도구에서 처리 함수가 실행되고 변수도 증가했다면, 다음 질문은 그 변경이 React의 어떤 렌더링 입력으로 전달됐는가다.

세 입력은 소유 위치가 다르다

세 입력은 모두 화면 계산에 쓰이지만 값의 소유 위치가 다르다.

이 표는 “변하지 않는 값은 props, 변하는 값은 state”라는 구분이 아니다. 부모가 소유한 단가도 서버 응답이나 선택한 상품이 바뀌면 다음 렌더링에서 다른 props로 전달될 수 있다. 중요한 기준은 값이 변할 수 있는지가 아니라 누가 값의 기준을 소유하는가다.

일반 변수를 바꿔도 화면 갱신은 요청되지 않는다

일반 자바스크립트 변수도 값을 기억할 수 있다. 그러나 React는 모든 변수 대입을 감시하지 않는다.

수량을 state로 옮기면 값의 보존과 화면 갱신 요청이 같은 경계에 놓인다.

import { useState } from 'react'
 
function OrderSummary({ unitPrice }) {
  const [quantity, setQuantity] = useState(1)
 
  function handleAdd() {
    setQuantity(quantity + 1)
  }
 
  return (
    <section>
      <p>수량: {quantity}</p>
      <p>합계: {unitPrice * quantity}원</p>
      <button type="button" onClick={handleAdd}>수량 추가</button>
    </section>
  )
}

useState(1)은 현재 수량과 다음 수량을 요청하는 함수를 제공한다. 버튼을 누르면 현재 렌더링의 quantity에 1을 더한 값을 다음 상태로 요청한다. 한 번의 처리 안에서 여러 상태 요청을 쌓는 규칙은 뒤의 상태 글에서 별도로 다룬다.

context는 숨겨진 전역 변수가 아니다

결제 화면의 여러 하위 컴포넌트가 같은 통화 단위를 읽는다면 context를 검토할 수 있다.

import { createContext, useContext, useState } from 'react'
 
const CurrencyContext = createContext('KRW')
 
function Checkout({ unitPrice, currency }) {
  return (
    <CurrencyContext value={currency}>
      <OrderSummary unitPrice={unitPrice} />
    </CurrencyContext>
  )
}
 
function OrderSummary({ unitPrice }) {
  const currency = useContext(CurrencyContext)
  const [quantity, setQuantity] = useState(1)
 
  return (
    <section>
      <p>수량: {quantity}</p>
      <p>합계: {unitPrice * quantity} {currency}</p>
      <button type="button" onClick={() => setQuantity(quantity + 1)}>
        수량 추가
      </button>
    </section>
  )
}

현재 React 19 문서에서 <CurrencyContext value={currency}>는 트리 아래에 현재 통화 값을 제공한다. createContext('KRW')의 'KRW'는 일치하는 상위 제공자가 없을 때만 사용하는 정적 대체값이며, 현재 값을 저장하거나 스스로 바꾸는 저장소가 아니다. React 18과 그 이전 문법에서는 같은 역할을 <CurrencyContext.Provider value={currency}>로 표현한다.

context는 파일 바깥에 둔 전역 변수와 다르다. 어떤 값이 적용되는지는 컴포넌트 트리의 제공자 위치로 결정되고 React의 렌더링 입력으로 추적된다. 하지만 전달 단계가 있다는 이유만으로 모든 값을 context에 넣으면 컴포넌트의 필수 입력 관계가 코드에서 덜 분명해질 수 있다. 특정 자식만 필요한 단가는 props로 두는 편이 필수 입력 관계를 읽기 쉽다.

이 코드에서 부모가 currency="USD"를 전달해 다시 렌더링하면 주문 요약도 USD를 표시해야 한다. 반면 unitPrice는 특정 주문 요약의 필수 입력이므로 context로 숨기지 않고 props로 전달한다. 이 대조를 테스트하면 context 값 경로와 props 계약을 함께 확인할 수 있다.

같은 상황을 입력 경로로 다시 진단한다

처음 실패를 입력 경로로 정리하면 다음과 같다.

문제       수량 추가 버튼 뒤에도 합계가 바뀌지 않음
잘못된 판단 JSX가 읽는 일반 변수만 바꾸면 화면도 바뀔 것임
관찰       처리 함수와 변수 대입은 실행됐지만 렌더링 요청이 없음
원인       수량이 props·state·context 중 어떤 경로에도 들어 있지 않음
행동       수량의 소유 컴포넌트에 state를 두고 설정 함수로 다음 값을 요청
검증       클릭마다 수량과 합계가 함께 바뀌고, 주문 요약 두 개가 수량을 공유하지 않으며,
           부모의 통화 값 변경이 표시 통화에 반영됨

풀 리퀘스트에서는 화면에 영향을 주는 새 값마다 다음을 확인할 수 있다.

• 기준 값을 어느 컴포넌트가 소유하는가?
• 자식은 props로 값을 받고 변경 의도를 처리 함수로 올려보내는가?
• 사용자 동작 사이에 보존할 값은 state인가?
• context는 트리의 넓은 범위에서 필요한 값에만 쓰였는가?
• React 밖의 가변 값을 렌더링 중 읽어 우연한 다시 렌더링을 기대하지 않는가?

React 공통 규칙과 렌더 대상의 책임을 나눈다

어떤 화면 요소로 반영되는지의 차이는 2편의 Render와 Commit, 이후 React Native 트랙에서 다룬다.

지금 기억할 축은 짧다.

부모의 값은 props, 컴포넌트의 기억은 state, 트리의 공유 값은 context다.

다음 글에서는 이 입력으로 컴포넌트를 실행하는 Render와 계산 결과를 실제 화면에 반영하는 Commit을 나누어 본다.