Jerry's Log

React - Overview

Posted: 2026-01-14 Tags: cs web frontend

contents

1. React란 무엇인가?

React는 사용자 인터페이스(UI)를 만들기 위한 오픈 소스 자바스크립트 라이브러리(완전한 프레임워크가 아님)이며, 특히 싱글 페이지 애플리케이션(SPA) 개발에 최적화되어 있습니다. 페이스북(현 Meta)이 개발하여 2013년에 공개했습니다.

"3대 원칙" (The Big Three)

React를 이해하려면 다음 세 가지 기둥을 이해해야 합니다.

  1. 선언형 (Declarative): 현재 데이터(State)를 기반으로 UI가 무엇(What) 이 되어야 하는지를 React에게 알려주면, React가 어떻게(How) DOM을 업데이트할지 효율적으로 처리합니다. 개발자가 직접 DOM을 조작(예: document.getElementById('demo').innerText = ...)하지 않습니다.
  2. 컴포넌트 기반 (Component-Based): 자체 상태를 관리하는 캡슐화된 '컴포넌트'를 만들고, 이를 조립하여 복잡한 UI를 구성합니다.
  3. 한 번 배워서 어디서나 사용 (Learn Once, Write Anywhere): React는 웹(React DOM), 모바일(React Native), 심지어 VR(React 360) 렌더링까지 지원합니다.

2. 핵심 개념 및 문법

JSX (JavaScript XML)

React는 JSX라는 문법 확장을 사용합니다. HTML처럼 보이지만, 자바스크립트 내부에서 직접 마크업을 작성할 수 있게 해줍니다.

const element = 
Hello, {name}!
;

컴포넌트 (Components)

React의 모든 것은 컴포넌트입니다. 역사적으로 두 가지 유형이 있었으나, 현재는 함수형 컴포넌트가 표준입니다.

  1. 함수형 컴포넌트 (Functional Components): JSX를 반환하는 단순한 자바스크립트 함수입니다.
  2. 클래스형 컴포넌트 (Class Components): 예전 방식(ES6 클래스)입니다. 주로 레거시 코드에서 볼 수 있습니다.

Props vs. State

React 데이터 흐름에서 가장 중요한 구분입니다.

기능 설명 변경 가능성 (Mutability)
Props "Properties"의 약자. 부모 컴포넌트에서 자식으로 내려주는 데이터. 읽기 전용 (Immutable)
State 컴포넌트 _내부_에서 관리되는 데이터. State가 변경되면 컴포넌트는 다시 렌더링(Re-render)됩니다. 변경 가능 (Setter 함수 사용)

단방향 데이터 흐름 (Unidirectional Data Flow)

React의 데이터는 오직 한 방향(위에서 아래로)으로만 흐릅니다. 부모는 자식에게 Props로 데이터를 줍니다. 만약 자식이 부모에게 데이터를 보내야 한다면, 부모가 자식에게 *함수(콜백)*를 전달하고 자식이 그 함수를 실행하는 방식을 사용합니다.

3. 마법과 같은 원리: Virtual DOM & 재조정

React의 가장 큰 혁신 중 하나는 가상 DOM (Virtual DOM) 입니다.

  1. 스냅샷 (The Snapshot): 앱의 상태(State)가 변경되면, React는 새로운 "가상 DOM" 트리(UI를 표현하는 가벼운 자바스크립트 객체)를 생성합니다.
  2. 비교 (Diffing): React는 이 새로운 트리와 이전 가상 DOM 트리를 비교하여 정확히 무엇이 바뀌었는지 찾아냅니다. 이 과정을 재조정(Reconciliation) 이라고 합니다.
  3. 패치 (Patching): React는 실제 브라우저 DOM에서 변경된 부분만 업데이트합니다. 이는 페이지 전체를 새로고침하거나 수동으로 DOM을 조작하는 것보다 훨씬 빠릅니다.

4. Hooks: 현대적인 엔진 (v16.8+)

2019년 이전에는 "State"를 사용하려면 클래스형 컴포넌트가 필요했습니다. 하지만 Hooks의 등장으로 함수형 컴포넌트에서도 State와 생명주기(Lifecycle) 기능을 사용할 수 있게 되었습니다.

필수 Hooks

성능 관련 Hooks

5. 고급 개념

Context API

컴포넌트 트리 전체에 데이터를 전달할 수 있는 방법으로, 일일이 수동으로 Props를 전달할 필요가 없습니다. React에 내장된 전역 상태 관리 도구라고 볼 수 있습니다.

React Fiber

React v16에서 도입된 새로운 내부 엔진입니다. React의 렌더링을 비동기적이고 중단 가능하게 만들었습니다.

React Server Components (RSC)

최신 기술이며 Next.js를 통해 대중화되었습니다.

6. 생태계 (The Stack)

React는 라이브러리이므로 완전한 앱을 만들려면 다른 도구들이 필요합니다.

라우팅 (Routing)

상태 관리 (State Management)

useState와 Context만으로 부족할 때 (복잡한 앱의 경우):

스타일링 (Styling)

프레임워크 (Meta frameworks)

오늘날 React 팀은 프로덕션 앱을 만들 때 React 기반 의 프레임워크 사용을 권장합니다.

7. 컴포넌트의 생명주기 (Lifecycle)

함수형 컴포넌트에서도 생명주기를 이해하는 것은 필수적입니다.

  1. 마운팅 (Mounting): 컴포넌트가 생성되어 DOM에 삽입되는 단계입니다.
  2. 업데이트 (Updating): Props나 State가 변경되어 컴포넌트가 다시 렌더링되는 단계입니다.
  3. 언마운팅 (Unmounting): 컴포넌트가 DOM에서 제거되는 단계입니다 (정리/Cleanup 작업이 여기서 일어납니다).

8. 요약: 왜 React를 사용하는가?

장점

단점

references

Related Posts