기존 프로젝트에 React 추가하기
기존 프로젝트에 상호작용 요소를 일부 추가하고 싶다면, React로 다시 작성할 필요가 없습니다. 기존 스택에 React를 추가하고 상호작용할 수 있는 React 컴포넌트를 어디에서나 렌더링하세요.
기존 웹사이트의 하위 경로 전체에 React 사용하기
example.com이라는 또 다른 서버 기술(Rails와 같은)로 빌드한 기존 웹 앱이 있고, example.com/some-app/으로 시작하는 모든 경로를 React로 완전히 구현하고 싶다고 가정하겠습니다.
다음과 같이 설정하는 것을 추천합니다.
- React 기반 프레임워크 중 하나를 사용하여 앱의 React 부분을 빌드하세요.
- 사용하는 프레임워크 설정에서
/some-app을 기본 경로Base Path로 명시하세요. (이때, Next.js, Gatsby를 사용하세요!) - 서버 또는 프록시를 구성하여
/some-app/하위의 모든 요청이 React 애플리케이션에서 처리되도록 하세요.
이는 앱의 React 부분이 이러한 프레임워크에 내장된 최고의 사례들Best Practices로부터 이점을 얻을 수 있습니다.
많은 React 기반의 프레임워크는 풀스택이며 React 앱이 서버를 활용할 수 있도록 합니다. 그러나 서버에서 자바스크립트를 실행할 수 없거나 실행하고 싶지 않은 경우에도 동일한 접근방식을 사용할 수 있습니다. 이러한 경우에는 HTML/CSS/JS 내보내기(Next.js의 경우 next export output, Gatsby의 경우 기본값)를 /some-app/에서 대신 제공하세요.
기존 페이지의 일부분에 React 사용하기
이미 다른 기술(Rails와 같은 서버 기술 또는 Backbone과 같은 클라이언트 기술)로 빌드된 기존 페이지가 있고, 해당 페이지 어딘가에 상호작용할 수 있는 React 컴포넌트를 렌더링하고 싶다고 가정하겠습니다. 이는 React 컴포넌트를 통합하는 일반적인 방식입니다. 실제로 수년 동안 Meta에서 대부분의 React 사용을 이런 식으로 하였습니다!
이 방식은 두 가지 단계로 수행할 수 있습니다.
-
JSX 구문을 사용할 수 있게 자바스크립트 환경을 설정하고,
import/export구문을 통해 코드를 모듈로 분리한 다음, npm 패키지 레지스트리에서 패키지(예시: React)를 사용하세요. -
해당 페이지에서 원하는 위치에 React 컴포넌트를 렌더링하세요.
정확한 접근 방식은 기존 페이지의 설정에 따라 다르기 때문에, 몇 가지 세부 사항을 함께 살펴보겠습니다.
1단계: 모듈 자바스크립트 환경 설정하기
모듈 자바스크립트 환경은 모든 코드를 한 파일에 작성하는 것이 아닌, 각각의 React 컴포넌트를 개별 파일로 작성할 수 있게 합니다. 또한 (React 자체를 포함한) 다른 개발자들이 npm 레지스트리에 배포한 훌륭한 패키지들을 모두 사용할 수 있습니다. 이 작업을 수행하는 방법은 기존 설정에 따라 다릅니다.
-
이미 애플리케이션이
import문을 이용해 파일로 분리하고 있다면 기존에 가지고 있는 설정을 이용해 보세요. JS 코드에서<div />를 작성하면 문법 오류가 발생하는지 확인해 보세요. 문법 오류가 발생한다면 Babel을 이용한 자바스크립트 코드 변환이 필요할 수 있으며, JSX를 사용하려면 Babel React 프리셋을 활성화해야 할 수도 있습니다. -
애플리케이션이 자바스크립트 모듈을 컴파일하기 위한 기존 설정이 없다면, Vite를 이용하여 설정하세요. Vite 커뮤니티는 Rails, Django, Laravel을 포함한 다양한 백엔드 프레임워크와의 통합을 지원하고 있습니다. 사용 중인 백엔드 프레임워크가 목록에 없다면 가이드를 참고하여 Vite 빌드를 백엔드와 수동으로 통합하세요.
설정이 제대로 동작하는지 확인하려면 프로젝트 폴더에서 아래 명령어를 실행하세요.
그리고 메인 자바스크립트 파일(index.js 혹은 main.js라는 파일일 수 있습니다.)의 최상단에 다음 코드 라인을 추가하세요.
import { createRoot } from 'react-dom/client'; // 기존 HTML 컨텐츠를 지웁니다. document.body.innerHTML = '<div id="app"></div>'; // 대신에 여러분이 작성한 React 컴포넌트를 렌더링합니다. const root = createRoot(document.getElementById('app')); root.render(<h1>Hello, world</h1>);
페이지의 전체 내용이 “Hello, world!”로 바뀌었다면 모든 것이 정상적으로 동작하고 있는 겁니다! 계속해서 읽어보세요.
2단계: 페이지 어디에서든 React 컴포넌트 렌더링하기
이전 단계에서는, 메인 파일 최상단에 아래 코드를 넣었습니다.
import { createRoot } from 'react-dom/client';
// 기존 HTML 컨텐츠를 지웁니다.
document.body.innerHTML = '<div id="app"></div>';
// 대신에 여러분이 작성한 React 컴포넌트를 렌더링합니다.
const root = createRoot(document.getElementById('app'));
root.render(<h1>Hello, world</h1>);당연히 실제로는 기존 HTML 콘텐츠를 지우고 싶지 않을 겁니다!
이 코드를 삭제하세요.
대신 React 컴포넌트를 HTML의 특정 위치에 렌더링하고 싶을 것입니다. HTML 페이지를 열고(또는 이를 생성하는 서버 템플릿) HTML 태그에 고유한 id 어트리뷰트를 추가하세요.
<!-- ... html의 어딘가 ... -->
<nav id="navigation"></nav>
<!-- ... 더 많은 html ... -->이렇게 하면 document.getElementById로 HTML 엘리먼트를 찾아 createRoot에 전달함으로써 해당 요소 내부에 React 컴포넌트를 렌더링할 수 있습니다.
import { createRoot } from 'react-dom/client'; function NavigationBar() { // TODO: 실제로 네비게이션 바를 구현합니다. return <h1>Hello from React!</h1>; } const domNode = document.getElementById('navigation'); const root = createRoot(domNode); root.render(<NavigationBar />);
기존에 존재하던 index.html의 원본 HTML 컨텐츠가 그대로 남아있는 것을 확인할 수 있습니다. 하지만 이제는 <nav id="navigation"> 안에 개발자가 직접 작성한 NavigationBar React 컴포넌트가 나타납니다. 기존 HTML 페이지에서 React 컴포넌트가 렌더링 되는 것에 대하여 더 알아보려면 createRoot 사용법 문서를 읽어보세요.
기존 프로젝트에서 React를 도입할 때, 일반적으로 작은 상호작용 컴포넌트(예시: 버튼)에서 시작하여 점진적으로 “상위 구조로 확장하면서” 결국에는 전체 페이지가 React로 빌드될 때까지 이 과정을 반복하게 됩니다. 이 지점에 도달한다면 React의 장점을 최대한 활용하기 위해 React 프레임워크로 마이그레이션하는 것을 권장합니다.
기존 네이티브 모바일 앱에서 React Native 사용하기
React Native 역시 기존 네이티브 앱에 점진적으로 통합할 수 있습니다. 안드로이드(Java 또는 Kotlin)나 iOS(Objective-C 또는 Swift) 앱을 개발하고 있다면, 가이드를 참고하여 React Native 화면을 추가해보세요.