역사와 버전

React는 충분히 오래되어 여러 시대를 거쳐왔으며, 그 역사의 대략적인 흐름을 알면 실제 코드를 읽을 때 도움이 됩니다. 2017년 튜토리얼과 오늘날의 튜토리얼 모두 "React"이지만 완전히 다르게 보일 수 있습니다. 이 장에서는 시간 흐름을 따라가며 실제로 마주치게 될 두 가지 스타일을 설명합니다.

간단한 타임라인

React는 Facebook에서 시작되었으며, 대규모의 데이터 기반 인터페이스를 DOM 업데이트를 일일이 손으로 처리하지 않고도 동기화해야 한다는 필요에서 비롯되었습니다. 2013년 오픈소스로 공개되었고, 현재 데이터에 맞게 UI를 기술하면 React가 업데이트를 처리하도록 한다는 핵심 아이디어는 지금까지 변하지 않았습니다. React를 작성하는 방식의 거의 모든 것이 이 핵심 원칙을 중심으로 진화했습니다.

처음 몇 년 동안은 상태를 기억해야 하는 컴포넌트를 JavaScript 클래스로 작성했습니다. 클래스는 일반적인 JavaScript 기능이며, React는 이를 이용해 시간에 따라 변하는 데이터를 저장할 수 있는 위치를 제공했고, React가 특정 시점에 호출하는 특별한 이름의 메서드들을 제공했습니다: 컴포넌트가 처음 화면에 나타날 때, 업데이트될 때, 그리고 제거될 때입니다. 이 스타일은 오랫동안 표준이었으며, 이것이 이미 존재하는 많은 React 코드가 이렇게 작성된 이유입니다.

큰 전환점은 훅으로, 2019년 초 React 16.8에 도입되었습니다. 훅은 React가 제공하는 함수로, 순수 함수형 컴포넌트가 이전에는 클래스만 할 수 있던 일들을 수행할 수 있게 합니다. 예를 들어 렌더링 사이에 값을 기억하는 것입니다. 컴포넌트를 작성하는 것이 훨씬 간단해졌고, 함수형 컴포넌트는 빠르게 새로운 코드의 표준이 되었습니다. 훅에서 나중에 자세히 다룹니다. 지금 기억해야 할 한 가지는 훅이 현대적 스타일을 가능하게 했다는 것입니다.

React는 계속 발전했습니다: React 18은 2022년에, React 19는 2024년에 출시되었으며, 각각 새로운 기능을 추가하고 거친 부분을 다듬었습니다. 이러한 릴리스는 실제 애플리케이션을 구축할 때 가장 중요하며, 핸드북의 뒷부분에서 관련된 부분을 다룹니다.

이것이 대략적인 흐름입니다. 날짜를 외울 필요는 없습니다. 기억해야 할 점은 React는 오랜 역사를 가지고 있지만, 기본 원리는 일관되게 유지되었고, 작성 스타일은 함수형 컴포넌트와 훅 방향으로 확실히 이동했다는 것입니다.

실제 코드에서 볼 수 있는 두 가지 React 스타일

그 역사 때문에 React를 두 가지 매우 다른 스타일로 작성한 것을 마주치게 될 것입니다.

더 오래된 스타일은 컴포넌트를 클래스로 작성합니다. 변하는 데이터는 클래스 내부에 있고, React는 컴포넌트의 생명주기 상의 정해진 지점에서 특별한 이름의 메서드들을 호출합니다. 많은 양의 프로덕션 코드가 여전히 이 방식으로 실행되고 있으며, 많은 오래된 튜토리얼, 블로그 글, Stack Overflow 답변들이 이 스타일로 작성되어 있습니다. 여전히 작동하고 계속 지원되지만, React를 작성하는 이전 방식일 뿐입니다.

더 오래된 스타일은 어떻게 생겼나요

이 핸드북은 이 스타일을 가르치지 않으며 이를 직접 작성할 필요도 없습니다. 다만 인식할 수 있는 것이 좋은데, 실제로 마주치게 될 것이기 때문입니다. 더 오래된 코드베이스의 컴포넌트는 대략 이렇게 생겼습니다:

class Counter extends React.Component {
  state = { count: 0 }

  componentDidMount() {
    // React가 이 메서드를 한 번 호출합니다. 컴포넌트가 처음 화면에 나타난 직후입니다
  }

  render() {
    return <button>Clicked {this.state.count} times</button>
  }
}

이를 나타내는 세 가지 특징이 있습니다: 맨 위의 class와 extends React.Component, 변하는 데이터가 살아있는 this.state, 그리고 React가 정해진 시점에 자동으로 호출하는 component로 시작하는 메서드 이름들입니다.

현대적 스타일은 컴포넌트를 함수로 작성하고 훅을 사용해 메모리를 주고 변화가 일어날 때 코드를 실행합니다. 새로운 React 코드가 이렇게 작성되며, 공식 문서도 이제 먼저 이를 가르칩니다.

이 강좌는 현대적 React를 가르칩니다: 처음부터 끝까지 함수형 컴포넌트와 훅을 사용합니다. 일자리의 코드베이스나 오래된 튜토리얼에서 더 오래된 클래스 기반의 동등한 코드를 마주치게 될 가능성이 있을 때, 두 스타일을 연결해서 이해할 수 있도록 표시해두겠습니다.

훅 이후의 두 릴리스는 이름으로 알아둘 가치가 있습니다. 2022년의 React 18은 동시성 렌더링을 가져왔습니다: React는 백그라운드에서 업데이트를 준비하고 인터페이스의 반응성을 유지하기 위해 작업을 중단할 수 있는 능력을 얻었습니다. 또한 앱이 시작되는 방식을 변경했으며, 진입점을 createRoot로 이동했습니다. 이것이 앱을 더 새로운 기능으로 선택하는 방식입니다.

React 19는 2024년에 같은 방향으로 계속 나아갔습니다. 폼 제출과 대기 상태를 처리하기 위한 Actions, 렌더 중에 promise와 context 같은 리소스를 읽기 위한 use 훅, 그리고 forwardRef에 의존하는 대신 일반 prop으로 ref를 전달할 수 있는 기능을 추가했습니다. 릴리스와 함께, React 컴파일러는 메모이제이션을 자동화합니다: 개발자가 이전에 useMemo와 useCallback으로 수동으로 수행하던 작업을 빌드 타임에 처리할 수 있습니다.

훅이 클래스를 대체한 것이지 함께 공존하게 된 것이 아닙니다. 클래스 모델은 상태 기반 로직을 공유하기 어렵게 만들었기 때문입니다. 컴포넌트 간에 동작을 재사용하려면 고차 컴포넌트로 감싸거나 render props를 통해 전달해야 했는데, 둘 다 트리를 깊게 중첩시키고 로직이 실제로 어디에 있는지를 모호하게 만들었습니다. 훅을 사용하면 그 로직을 순수 함수인 custom hook으로 추출하고 어떤 컴포넌트에서든 호출할 수 있습니다. 재사용 방식이 극적으로 간단해졌습니다. 훅은 또한 this를 피합니다: 클래스 컴포넌트는 메서드를 바인드하고 호출 시점에 this가 무엇을 가리키는지 추론하도록 강제하며, 이는 함수형 컴포넌트에는 없는 버그의 반복적인 원인이었습니다.

React 18의 동시성 작업은 createRoot 변경이 시사하는 것보다 더 깊은 변화입니다. 렌더링 자체가 동작하는 방식을 API 호출 수준 훨씬 아래에서 변경했습니다. React는 이제 업데이트 렌더링을 시작하고, 멈추고, 재개하거나 포기할 수 있습니다. 이는 렌더링이 더 이상 한 번에 처음부터 끝까지 실행되도록 보장되지 않는다는 의미입니다. startTransition과 Suspense 기반 데이터 로딩 같은 기능들이 이를 기반으로 합니다. 이것이 createRoot가 단순한 새로운 함수 이름 이상의 의미를 갖는 이유입니다: 선택하는 것이 React에게 이런 방식으로 렌더링을 스케줄하고 중단할 수 있는 권한을 부여합니다.

여기서부터 핸드북은 현대적 스타일로 진행되며, 컴포넌트에서 본격적으로 시작됩니다: 함수로서 UI의 일부를 반환하는 컴포넌트입니다. 그 이전에, 당신의 머신에 React를 설치하고 실행해야 합니다.

Juno두 가지 스타일, 하나의 Reactclass에 this.state와 componentDidMount가 있는 튜토리얼을 찾았다면 놀라지 마세요. 그것이 더 오래된 React 스타일이고 여전히 작동합니다. 이 강좌는 훅을 가진 함수형 컴포넌트인 더 새로운 스타일을 사용하며, 지나가면서 더 오래된 방식을 지적해주겠습니다.

Juno두 가지 스타일, 하나의 React 실제 코드를 읽기 위한 빠른 맵: this.state와 생명주기 메서드를 가진 클래스는 훅 이전 스타일이고, useState와 useEffect를 가진 함수는 현대적 React입니다. 일에서 둘 다 볼 것입니다. 우리는 현대적 스타일로 구축하고, 실제로 마주치게 될 클래스 기반의 동등한 것을 표시해주겠습니다.

Juno두 가지 스타일, 하나의 React 구별해야 할 릴리스들: 16.8의 훅은 기본 저작 스타일을 바꾸고 HOC나 render props 없이 로직 재사용을 해결했습니다; 18은 동시성 렌더링을 소개하고 진입점을 createRoot로 이동했습니다; 19는 Actions, use 훅, prop으로서의 ref를 추가했습니다. 훅과 동시성은 렌더링 의미론에 도달하는 두 가지 변화이며, 메커니즘 수준에서 이해할 가치가 있는 것들입니다.

다음: React 프로젝트 설정. 여기서 자신의 머신에 React를 실행하게 됩니다.