다음을 통해 공유

React 개요

React JS란 무엇인가요?

React는 프런트 엔드 사용자 인터페이스를 빌드할 수 있는 오픈 소스 JavaScript 라이브러리입니다. 전체 애플리케이션 프레임워크를 제공하는 다른 JavaScript 라이브러리와 달리 React는 상태를 유지하고 UI 요소를 생성하는 구성 요소 라는 캡슐화된 단위를 통해 애플리케이션 뷰를 만드는 데만 집중합니다. 개별 구성 요소를 웹 페이지에 추가하거나 구성 요소의 계층 구조를 중첩하여 복잡한 UI를 만들 수 있습니다.

React 구성 요소는 일반적으로 HTML과 매우 유사하게 표시되는 JavaScript 확장인 JavaScript 및 JSX(JavaScript XML)로 작성되지만 UI 요소에 대한 이벤트 처리기 등록과 같은 일반적인 작업을 보다 쉽게 수행할 수 있도록 하는 몇 가지 구문 기능이 있습니다. React 구성 요소는 구성 요소의 UI를 나타내는 JSX를 반환하는 렌더링 메서드를 구현합니다. 웹앱에서 구성 요소에 의해 반환된 JSX 코드는 브라우저에서 렌더링된 브라우저 호환 HTML로 변환됩니다.

중요합니다

2025년 2월, React 팀은 CRA(React App) 만들기가 새 앱에서 더 이상 사용되지 않음을 발표 했습니다. 팀은 기존 앱이 Next.js 또는 React 라우터와 같은 프레임워크로 마이그레이션하거나 Vite, Parcel 또는 RSBuild와 같은 빌드 도구로 마이그레이션하는 것이 좋습니다.

React는 Windows 작동하나요?

있음. Windows React 앱을 개발하기 위한 두 가지 환경을 지원합니다.

  • Windows
  • Windows Subsystem for Linux

React로 무엇을 할 수 있나요?

Windows 다음을 포함하여 React 개발자를 위한 다양한 시나리오를 지원합니다.

  • 기본 웹 앱: React를 처음 사용하고 주로 React로 기본 웹 앱을 빌드하는 방법에 관심이 있다면, Windows에서 vite 프론트엔드 도구를 사용하여 React 앱을 만들어보세요. 프로덕션용으로 배포할 웹앱을 만들려는 경우 성능 향상, 시스템 호출 호환성 및 로컬 개발 환경과 배포 환경(Linux 서버)간의 맞춤을 위해 Windows Subsystem for Linux(WSL) vite 프런트 엔드 도구를 사용하여 React 앱을 만드는 것을 고려할 수 있습니다.

  • Single-Page 앱(SPA): 전체 새 페이지를 로드하는 브라우저 기본값이 아니라 서버의 새 데이터로 현재 웹 페이지를 동적으로 다시 작성하여 사용자와 상호 작용하는 웹 사이트입니다. 정적 콘텐츠 지향 SPA 웹 사이트를 빌드하려면 WSL에 Gatsby를 설치하는 것이 좋습니다. Node.js 백 엔드를 사용하여 서버 렌더링 SPA 웹 사이트를 빌드하려면 WSL에 Next.js 설치하는 것이 좋습니다. (Next.js 이제 정적 파일 서비스도 제공합니다.)

  • Native 데스크톱 앱: React Native for Desktop + macOS를 사용하면 다양한 유형의 데스크톱 PC, 랩톱, 태블릿, Xbox 및 Mixed Reality 디바이스에서 실행할 수 있는 JavaScript 기반의 네이티브 데스크톱 애플리케이션을 만들 수 있습니다. Windows SDK 및 macOS SDK 모두 지원합니다.

  • 네이티브 모바일 앱: React Native 는 네이티브 플랫폼 UI 코드로 렌더링되는 JavaScript를 사용하여 Android 및 iOS 앱을 만드는 플랫폼 간 방법입니다. React Native는 Expo CLI와 React Native CLI 등 두 가지 방법으로 설치할 수 있습니다. StackOverflow에서 두 가지를 비교해도 좋습니다. Expo에는 앱을 실행하고 테스트할 수 있는 iOS 및 Android 모바일 디바이스용 클라이언트 앱이 있습니다. Windows, React Native 및 Expo CLI를 사용하여 Android 앱을 개발하는 방법에 대한 지침은 Windows에서 Android 개발을 위한 React Native를 참조하세요.

설치 옵션

특정 사용 사례 시나리오에 가장 잘 작동하는 통합 도구 체인과 함께 React를 설치하는 방법에는 여러 가지가 있습니다. 다음은 가장 일반적인 몇 가지 방법입니다.

React 도구

일반 텍스트 편집기에서 간단한 React 구성 요소를 작성해보는 것이 React를 처음 이해하는 데 좋은 방법입니다. 하지만 이러한 방식으로 생성된 코드는 분량이 커져서 유지 관리 및 배포가 어렵고 속도가 느려집니다. 프로덕션 앱에서 수행해야 하는 몇 가지 일반적인 작업이 있습니다. 이러한 작업은 앱에서 종속성으로 사용하는 다른 JavaScript 프레임워크에 의해 처리됩니다. 이러한 작업에는 다음이 포함됩니다.

  • 컴파일 - JSX는 React 앱에 일반적으로 사용되는 언어이지만 브라우저는 이 구문을 직접 처리할 수 없습니다. 대신 코드를 표준 JavaScript 구문으로 컴파일한 후 여러 브라우저에 맞게 사용자 지정해야 합니다. Babel 은 JSX를 지원하는 컴파일러의 예입니다.
  • 번들링 - 성능은 최신 웹앱의 핵심이므로 앱의 JavaScript는 앱에 필요한 코드만 포함하고 가능한 한 적은 수의 파일로 결합하는 것이 중요합니다. webpack과 같은 번들러는 이 작업을 수행합니다.
  • 패키지 관리 - 패키지 관리자는 업데이트 및 종속성 관리를 포함하여 앱에 타사 패키지의 기능을 쉽게 포함할 수 있습니다. 일반적으로 사용되는 패키지 관리자에는 Yarn 및 npm이 포함됩니다.

앱을 만들고 빌드하고 배포하는 데 도움이 되는 프레임워크 모음을 도구 체인이라고 합니다. 이 도구 체인을 사용하는 React용 개발 환경을 쉽게 설정할 수 있는 것은 간단한 1페이지 앱을 생성하는 Vite 입니다. Vite를 사용하는 데 필요한 유일한 설정은 Node.js.

React Native 구성 요소 디렉터리

React Native 앱에서 사용할 수 있는 구성 요소는 다음과 같습니다.

  • 핵심 구성 요소 - React Native 프레임워크의 일부로 개발되고 지원되는 구성 요소입니다.
  • 커뮤니티 구성 요소 - 커뮤니티에서 개발하고 유지 관리하는 구성 요소입니다.
  • 네이티브 구성 요소 - 플랫폼 네이티브 코드를 사용하여 직접 작성하고 React Native에서 액세스 가능하도록 등록하는 구성 요소입니다.

React Native Directory는 대상 플랫폼별로 필터링할 수 있는 구성 요소 라이브러리 목록을 제공합니다.

풀스택 리액트 툴체인 옵션

React는 프레임워크가 아닌 라이브러리이므로 더 복잡한 앱을 만들려면 추가 도구가 필요할 수 있습니다. React를 사용하는 것 외에도 다음을 사용할 수 있습니다.

  • 패키지 관리자: React의 인기 있는 두 패키지 관리자는 npm (NodeJS에 포함됨) 및 yarn입니다. 둘 다 설치 가능하며 유지 관리가 잘 된 패키지로 구성된 다양한 라이브러리를 지원합니다.
  • React 라우터: 웹 앱에서 책갈피 가능한 URL을 사용하거나 React Native에서 탐색할 수 있는 구성 요소를 제공하는 탐색 구성 요소의 컬렉션입니다. React는 실질적으로 상태 관리와 해당 상태를 DOM에 렌더링하는 데만 관심이 있으므로 React 애플리케이션을 만들려면 일반적으로 React 라우터와 같은 라우팅 라이브러리를 사용해야 합니다.
  • Redux: 데이터 흐름 아키텍처에 도움이 되는 예측 가능한 상태 컨테이너입니다. 좀 더 고급 React 개발을 할 때까지는 필요한 항목이 아닐 수 있습니다. Redux 제작자 중 한 명인 Dan Abramov는 "바닐라 React에 문제가 생길 때까지 Redux를 사용하지 마세요"라고 합니다.
  • Webpack: JavaScript 모듈(모듈 번더라고도 함)을 컴파일할 수 있는 빌드 도구입니다. Webpack은 애플리케이션을 처리할 때 프로젝트에 필요한 모든 모듈을 매핑하는 종속성 그래프를 내부적으로 작성하고 번들을 하나 이상 생성합니다.
  • Uglify: JavaScript 구문 분석기, 코드 경량화기, 압축기 및 코드 정리 도구 키트입니다.
  • Babel: 현재 및 이전 브라우저 또는 환경에서 ECMAScript 2015+ 코드를 이전 버전과 호환되는 JavaScript 버전으로 변환하는 데 주로 사용되는 JavaScript 컴파일러입니다. 구문 변환 또는 브라우저 폴리필을 마이크로 관리하지 않아도 되고 지원할 인터넷 브라우저를 정의할 수 있도록 babel-preset-env 를 사용하는 것이 유용할 수도 있습니다.
  • ESLint: 코드를 보다 일관되게 만들고 버그를 방지하는 데 도움이 되는 JavaScript 코드에 있는 패턴을 식별하고 보고하는 도구입니다.
  • 효소: React 구성 요소의 출력을 더 쉽게 테스트할 수 있는 React용 JavaScript 테스트 유틸리티입니다.
  • Jest: React 앱에서 Idiomatic JavaScript 테스트를 작성하는 데 도움이 되도록 Babel과 함께 작동하는 테스트 프레임워크입니다.
  • Mocha: 비동기 테스트, 보고 및 catch되지 않은 예외를 올바른 테스트 사례에 매핑하는 데 도움이 되는 Node.js 및 브라우저에서 실행되는 테스트 프레임워크입니다.

React 과정 및 자습서

다음은 React에 대해 배우고 샘플 앱을 빌드할 수 있는 권장 사이트입니다.

추가 리소스

  • Last updated on