React 19

[React] React 19를 알아보자! (1) React의 핵심 개념

student0 2025. 5. 7. 03:24

2024년 4월 React 19 베타 버전이 발표되고 12월에 정식 버전이 발표되었습니다. 기존 React 18과 어떤 점이 다르고, 어떻게 발전했는지를 알아보며 React를 되돌아 보는 시간을 갖고자 합니다. 해당 학습을 진행한 후 계속 할려고 했던 자체 블로그 개발까지 진행할 예정입니다! [React19 + Vite + TypeScript + TailwindCSS v4] 응원 부탁드려요 :)

 

기초부터 알아보자! React의 핵심 개념

먼저 React의 핵심 개념을 짚고 넘어가는 게 좋다는 생각이 들었습니다. 우선 React는 모두가 알다시피 UI 구축을 편리하게 하기 위한 선언형 JS 라이브러리입니다. 이러한 React의 핵심적인 내용을 추려보면 다음과 같습니다.

 

개념적 내용

  • 선언형 프로그래밍
  • 컴포넌트 기반 아키텍처
  • Virtual DOM
  • JSX

실무적 내용

  • State
  • Props
  • 라이프 사이클

위와 같이 나누긴 했지만 제일 중요한 것은 State를 기반으로 UI를 편리하게 구현하고 관리할 수 있다는 점입니다. 그 과정에서 React의 라이프사이클을 이용해 원하는 작업을 하기도 하고, Props를 통해 자식 컴포넌트에게 데이터를 전달할 수 있습니다.

 

공식 문서에 있는 간단한 예제를 보면 단번에 React의 원리를 파악할 수 있습니다.

import {useState} from 'react';

export default function CounterComponent () {
	
    const [count, setCount] = useState(0)
    
    return (
    	<div>
        	<p> Count: {count} </p>
        	<button onClick = {() => setCount(count + 1)} >+</button>
        </div>
    )
}

해당 컴포넌트가 있는 React 프로젝트를 실행시키면 버튼을 누를 시 count가 +1씩 되어 화면에 표시되는 것을 볼 수 있을 것입니다. React에 있는 useState를 이용해 상태를 정의할 수 있고, 해당 상태의 값은 count를 가져와 표시하고 상태를 변경하고 싶을 땐 setCount를 가져와 원하는 작업을 할 수 있습니다.

 

이를 기반으로 더 나아가 특정 상태에서는 어떤 화면을 띄울 것인지, 특정 버튼을 눌렀을 때, 어떤 요소와 상호작용하게 할 것인지를 설계할 수 있습니다.

 

위에서 언급한 핵심 개념을 나타내는 단어들도 놓칠 수 없죠! 조금은 심도있게 파헤쳐 보겠습니다.

 

선언형 프로그래밍

React는 선언형 패러다임을 따릅니다. 개발자는 최종 상태만 기술하고 실제 DOM 갱신은 바뀐 state에 따라 React가 내부적으로 처리합니다. 이를 통해 state와 UI의 일관성을 쉽게 유지할 수 있도록 도와줍니다.

 

컴포넌트 기반 아키텍처

React는 컴포넌트 기반의 구조를 가지고 있습니다. 이러한 컴포넌트 기반 구조는 소프트웨어공학의 기본 원칙인 모듈화와 캡슐화 원칙을 따릅니다. 즉 각 컴포넌트는 독립적으로 동작하며, 자신의 상태와 로직을 내부에 감추고, 외부에는 명확한 인터페이스(Props)만을 제공합니다. 이를 통해 대규모 시스템임에도 불구하고 높은 유지보수성과 확장성을 보장할 수 있습니다.

 

Virtual DOM

React 하면 빼놓을 수 없는 개념입니다. 실제 DOM 대신 경량화된 자바스크립트 객체 트리 즉, Virtual DOM을 메모리 상에서 유지하고, UI에 변화가 생기면 새로운 Virtual DOM을 만들고, 이전 Virtual DOM과 비교하여 실제 DOM에 반영해야 할 최소한의 변경만 계산합니다.

 

해당 과정에서 O(n^3) 복잡도의 완전 트리 비교 알고리즘이 아니라 O(n) 복잡도의 휴리스틱 알고리즘 Diffing 알고리즘을 사용합니다.

  • 서로 다른 타입의 엘리먼트는 완전히 다른 트리로 간주
  • 같은 레벨의 리스트에서 효율적인 비교를 위해 Key Prop을 사용
  • 자식 노드들은 위에서부터 아래로 재귀적으로 비교하며, 순서가 바뀌거나 추가/삭제된 항목만 찾아내서 DOM에 반영

이를 기반으로 변경된 부분만 실제 DOM에 적용하는 과정을 Reconciliation이라고 합니다.

 

JSX

JSX도 React의 핵심 중 하나입니다. JavaScript를 확장한 문법으로, HTML과 비슷하게 UI 구조를 선언적으로 작성할 수 있도록 해줍니다. 실제로는 Babel과 같은 트랜스파일러에 의해 순수 JavaScript로 변환됩니다. 즉 실질적으로 JavaScript 코드지만 사용할 때는 HTML 코드처럼 사용할 수 있는 것입니다

 

State

각 컴포넌트는 자신의 State(상태)를 가질 수 있으며, 상태가 변경될 경우 해당 컴포넌트와 하위 컴포넌트만 다시 렌더링됩니다. 이를 통해 효율적으로 UI를 갱신합니다. React에서는 이를 편리하게 사용할 수 있도록 useState를 제공합니다.

 

Props

Props는 부모 컴포넌트에서 자식 컴포넌트에 원하는 값을 전달하는 방법입니다. 이 과정에서 단방향 데이터 흐름을 채택하였고, 데이터는 무조건 부모에서 자식으로만 흐르며, Props를 통해 전달합니다. 덕분에 상태 변화 추적과 디버깅을 쉽게 할 수 있습니다.

 

React의 라이프사이클

React는 컴포넌트가 생성되어 DOM에 삽입되고 상태나 Props 변경으로 업데이트 되고 DOM에서 제거되는 각 과정에 기여할 수 있습니다. 이러한 일련의 과정을 라이프사이클이라고 하며, 이 과정에서 특정 시점에 원하는 작업을 할 수 있습니다.

 

일반적으로 라이프사이클을 이용할 수 있는 방식은 클래스형 컴포넌트이지만, useEffect 훅을 이용해 함수형 컴포넌트에서도 라이프사이클을 이용해 원하는 작업 및 기능을 구현할 수 있게 되었습니다.

 

이러한 React 라이브사이클은 크게 3가지 단계가 있습니다.

  • Mount : 초기화 및 첫 렌더링 시점,
    useEffect(() => { //원하는 작업 }, [])

 

  • Update : 상태나 Props가 변경되었을 때, 리렌더링 하는 시점,
    useEffect(() => { //원하는 작업 }, [props 혹은 state]) -> props 혹은 state 값이 바뀔 때마다 원하는 작업 수행

 

  • UnMount : 화면이 닫히면 컴포넌트가 제거되기 직전 시점,
    useEffect(() => { return () => {//원하는 작업} }, [])

이정도면 충분히 핵심 개념 및 원리를 파악하셨을 거라고 생각합니다. 이어서 공식 문서 기반 직접 프로젝트를 세팅하고 React를 전체적으로 훑어보며 React 19에서 바뀐 훅 및 기능에 대해 정리해 보겠습니다.