English

React — 사용자 인터페이스 라이브러리

기술 카탈로그 / react.html

catalog환경: React 19.x (2026-10 기준 19.2.x), JavaScript/TypeScript검증: 2026-10-19

웹과 네이티브 화면을 컴포넌트 단위로 만드는 자바스크립트 라이브러리입니다. 무엇을 해결하는지와 공식 시작점을 정리했습니다.

💬 "React가 뭔가요? 언제 쓰나요?"

React는 화면(UI)을 작은 조각(컴포넌트)으로 나눠서 조립하는 자바스크립트 라이브러리입니다. 웹 브라우저 화면뿐 아니라 모바일 앱 화면에도 씁니다. Meta(구 Facebook)가 만들고 오픈소스로 운영합니다.

이 기술은 무엇을 해결하나요

  • 화면이 커질 때 코드가 지저분해지는 문제를 컴포넌트로 나눠서 관리합니다.
  • 데이터가 바뀌면 화면을 직접 고치는 대신 React가 알아서 해당 부분만 갱신합니다.
  • 웹·모바일에서 같은 방식으로 UI를 생각할 수 있게 합니다.

언제 선택하면 좋나요

  • 화면 상호작용이 많고 상태(데이터)가 자주 바뀌는 앱
  • 여러 사람이 함께 만드는 프로젝트 (컴포넌트 단위 협업)
  • 다른 사람 만든 UI 패키지를 자주 쓰는 프로젝트

작은 정적 페이지 하나라면 굳이 React까지 필요하지 않을 수 있습니다.

공식 시작점

  • 설치·시작: 공식 문서의 Quick Start에서 create-react-app 대신 공식 권장 툴로 프로젝트를 만듭니다.
  • 배운 순서: 공식 문서의 Tutorial → Thinking in React 순서가 개념 잡기에 좋습니다.
  • 버전 확인: 2026년 10월 기준 최신 메이저는 React 19이고, 패치는 19.2.x입니다. React 20은 아직 공개되지 않았습니다.

한계와 주의할 점

  • React는 라이브러리이지 완성된 프레임워크가 아닙니다. 라우팅·서버 통신 등은 필요에 따라 다른 패키지를 함께 선택합니다.
  • 공식 문서 외의 튜토리얼은 구버전(React 17 이전)일 수 있습니다. 학습 자료를 고를 때 React 19 기준인지 확인하세요.
  • 빠르게 바뀌는 생태계라 공식 블로그의 릴리스 글을 기준으로 최신성을 판단하는 편이 안전합니다.

다음 단계

  • 개념 이해: 아래 출처의 공식 문서 Quick Start
  • 실습: Tutorial을 하나 끝까지 따라 만들기
  • 프로젝트 적용: 기존 페이지 일부를 컴포넌트로 옮겨보기

출처

검증일은 자료의 최신성을 나타냅니다. 오래된 자료는 적용 조건을 확인하세요.