기존 프로젝트 추가

기존 프로젝트에 리액트를 추가하려면 프로젝트를 처음부터 리액트로 다시 작성할 필요는 없습니다. 기존 스택에 리액트를 추가하고 인터랙티브한 리액트 컴포넌트를 어디서든 렌더링할 수 있습니다.

참고 로컬 개발을 위해 Node.js를 설치해야 합니다. 리액트를 온라인에서 또는 간단한 HTML 페이지로 시도할 수 있지만, 실제로 대부분의 JavaScript 개발 도구는 Node.js를 사용해야 합니다.

기존 웹사이트의 하위 경로 전체에 리액트 사용하기

기존 example.com에서 시작하는 모든 경로(example.com/some-app/ 등)를 리액트로 완전히 구현하고 싶다고 가정해봅시다. 이를 위해 다음과 같이 설정하는 것이 좋습니다.

리액트 기반 프레임워크를 사용하여 앱의 리액트 부분을 구축합니다. 프레임워크의 설정에서 기본 경로를 /some-app으로 지정합니다(여기에서 확인할 수 있습니다: Next.js, Gatsby). 서버 또는 프록시를 구성하여 /some-app/ 하위의 모든 요청을 리액트 앱으로 처리합니다. 이렇게 하면 앱의 리액트 부분이 해당 프레임워크에 내장된 모베스트 프랙티스를 활용할 수 있습니다.

많은 리액트 기반 프레임워크는 풀스택이며 리액트 앱이 서버를 활용할 수 있게 해줍니다. 그러나 서버에서 JavaScript를 실행할 수 없거나 원하지 않는 경우에도 동일한 접근 방식을 사용할 수 있습니다. 이 경우, HTML/CSS/JS 익스포트 (Next.js의 경우 next export 출력물 또는 Gatsby의 경우 기본 설정)을 /some-app/에 제공하면 됩니다.

기존 페이지의 일부분에 리액트 사용하기

기존 기술(예: Rails와 같은 서버 기반 또는 Backbone과 같은 클라이언트 기반)을 사용하여 구축한 페이지가 있고 해당 페이지에 리액트 컴포넌트를 어딘가에 인터랙티브하게 렌더링하고 싶다고 가정해봅시다. 이것은 리액트를 통합하는 일반적인 방법입니다. 사실, Meta에서 수년 동안 대부분의 리액트 사용은 이렇게 보였습니다!

다음 두 단계로 수행할 수 있습니다.

JSX 구문을 사용하여 JavaScript 환경을 설정하고, 코드를 모듈로 분리하고, npm 패키지(예: 리액트)를 사용할 수 있는 JavaScript 환경을 구성합니다. 리액트 컴포넌트를 페이지에서 보고 싶은 위치에 렌더링합니다. 정확한 접근 방식은 기존 페이지 설정에 따라 다르므로 몇 가지 세부 정보를 살펴보겠습니다.

단계 1: 모듈식 JavaScript 환경 설정

모듈식 JavaScript 환경을 설정하면 리액트 컴포넌트를 개별 파일에 작성할 수 있으며, 모든 놀라운 패키지를 npm 레지스트리에서 다른 개발자가 발행한 패키지와 함께 사용할 수 있습니다. 이는 기존 설정에 따라 달라집니다.

import 문을 사용하는 파일로 이미 분할되어 있는 경우, 이미 있는 설정을 사용해 보십시오. JS 코드에서 <div />를 작성하면 구문 오류가 발생하는지 확인하십시오. 구문 오류가 발생하면 Babel을 사용하여 JavaScript 코드를 변환하고 Babel 리액트 프리셋을 활성화하여 JSX를 사용해야 할 수도 있습니다.

JavaScript 모듈을 컴파일하기 위한 기존 설정이 없는 경우, Vite를 사용하여 설정하십시오. Vite 커뮤니티는 Rails, Django, Laravel 등 백엔드 프레임워크와 많은 통합을 유지하고 있습니다. 백엔드 프레임워크가 목록에 없는 경우, 백엔드와 Vite 빌드를 수동으로 통합하기 위한 이 가이드를 따르십시오.

설정이 작동하는지 확인하려면 프로젝트 폴더에서 다음 명령을 실행하십시오.

npm install react react-dom

그런 다음, 주요 JavaScript 파일의 상단에 다음 코드를 추가하십시오(index.js 또는 main.js일 수 있음):

만약 페이지의 전체 내용이 "Hello, world!"로 대체되었다면, 모든 것이 작동한 것입니다! 계속 읽어보세요.

참고 기존 프로젝트에 모듈식 JavaScript 환경을 처음으로 통합하는 것은 다소 어려울 수 있지만, 그만한 가치가 있습니다! 도움이 필요한 경우, 커뮤니티 리소스나 Vite 채팅을 시도해 보세요.

단계 2: 페이지 어디든지 리액트 컴포넌트 렌더링하기

이전 단계에서 다음 코드를 주요 파일 상단에 넣었습니다.

import { createRoot } from 'react-dom/client';

// 기존 HTML 내용을 지웁니다.
document.body.innerHTML = '<div id="app"></div>';

// 대신 리액트 컴포넌트를 렌더링합니다.
const root = createRoot(document.getElementById('app'));
root.render(<h1>Hello, world</h1>);

물론, 실제로 기존 HTML 내용을 지우고 싶지는 않을 것입니다!

이 코드를 삭제하십시오.

대신에, 리액트 컴포넌트를 HTML의 특정 위치에 렌더링하고 싶은 경우가 많습니다. HTML 페이지(또는 해당 페이지를 생성하는 서버 템플릿)를 열고, 아무 태그에도 고유한 id 속성을 추가하십시오. 예를 들어:

<!-- ... html 어딘가에 ... -->
<nav id="navigation"></nav>
<!-- ... 더 많은 html ... -->

이렇게 하면 document.getElementById를 사용하여 해당 HTML 요소를 찾고, 이를 createRoot에 전달하여 리액트 컴포넌트를 해당 위치에 렌더링할 수 있습니다.

기존 프로젝트에서 리액트를 채택할 때는 일반적으로 버튼과 같은 작은 인터랙티브 컴포넌트부터 시작한 다음, "점진적으로 위로 이동"하면서 결국 전체 페이지를 리액트로 구축하는 것이 일반적입니다. 그런 경우에는 최대한 리액트의 장점을 활용하기 위해 리액트 프레임워크로 마이그레이션하는 것을 권장합니다.

기존 네이티브 모바일 앱에서 리액트 Native 사용하기

리액트 Native는 기존의 네이티브 앱에 점진적으로 통합할 수도 있습니다. Android용 기존 네이티브 앱(Java 또는 Kotlin) 또는 iOS용 기존 네이티브 앱(Objective-C 또는 Swift)이 있는 경우 이 가이드를 따라 리액트 Native 화면을 추가할 수 있습니다.