기존 프로젝트에 React 추가하기
기존 프로젝트에 약간의 상호작용을 추가하고 싶다면, React로 전체를 다시 작성할 필요는 없습니다. 기존 스택에 React를 추가하고, 어디서든 상호작용이 가능한 React 컴포넌트를 렌더링하세요.
기존 웹사이트의 전체 하위 경로에 React 사용하기
예를 들어, 다른 서버 기술(예: Rails)로 구축된 기존 웹 앱이example.com에 있고, example.com/some-app/로 시작하는 모든 경로를 React로 완전히 구현하고 싶다고 가정해 보겠습니다.
다음은 설정 방법을 권장하는 방식입니다:
- 앱의 React 부분 구축: React 기반 프레임워크중 하나를 사용하여 앱의 React 부분을 구축합니다.
- 기본 경로 지정
/some-app: 프레임워크 구성에서기본 경로을 로 지정합니다(방법: Next.js, Gatsby). - 서버 또는 프록시 구성:
/some-app/아래의 모든 요청이 React 앱에 의해 처리되도록 서버 또는 프록시를 구성합니다.
이렇게 하면 앱의 React 부분이 해당 프레임워크에 내장된모범 사례의 이점을 누릴 수 있습니다.
많은 React 기반 프레임워크는 풀스택이며, React 앱이 서버의 이점을 활용할 수 있게 합니다. 그러나 서버에서 JavaScript를 실행할 수 없거나 실행하지 않으려는 경우에도 동일한 접근 방식을 사용할 수 있습니다. 그런 경우에는 HTML/CSS/JS 내보내기(Next.js의 경우next export 출력, Gatsby의 경우 기본값)를/some-app/에서 제공하면 됩니다.
기존 페이지의 일부에 React 사용하기
다른 기술(서버 측 기술인 Rails 또는 클라이언트 측 기술인 Backbone)로 구축된 기존 페이지가 있고, 해당 페이지의 어딘가에 상호작용이 가능한 React 컴포넌트를 렌더링하고 싶다고 가정해 보겠습니다. 이는 React를 통합하는 일반적인 방법이며, 실제로 Meta에서도 수년 동안 대부분의 React 사용이 이런 방식이었습니다!
이는 두 단계로 수행할 수 있습니다:
- JavaScript 환경 설정: JSX 구문을 사용하고, 코드를 import/export구문을 사용하여 모듈로 분할하고,npm패키지 레지스트리에서 패키지(예: React)를 사용할 수 있는 JavaScript 환경을 설정합니다.
- React 컴포넌트 렌더링: 페이지에서 보고 싶은 위치에 React 컴포넌트를 렌더링합니다.
정확한 접근 방식은 기존 페이지 설정에 따라 다르므로, 몇 가지 세부 사항을 살펴보겠습니다.
1단계: 모듈식 JavaScript 환경 설정
모듈식 JavaScript 환경을 사용하면 모든 코드를 단일 파일에 작성하는 대신, 개별 파일에 React 컴포넌트를 작성할 수 있습니다. 또한 다른 개발자가npm레지스트리에 게시한 모든 멋진 패키지(React 자체 포함!)를 사용할 수 있습니다. 이를 수행하는 방법은 기존 설정에 따라 다릅니다:
- 앱이 이미
import문을 사용하는 파일로 분할되어 있다면,기존 설정을 사용해 보세요. JS 코드에서<div />를 작성할 때 구문 오류가 발생하는지 확인하세요. 구문 오류가 발생한다면, JavaScript 코드를Babel로 변환하고 JSX를 사용하기 위해Babel React 프리셋을 활성화해야 할 수 있습니다. - 앱에 JavaScript 모듈 컴파일을 위한 기존 설정이 없다면, Vite로 설정하세요. Vite 커뮤니티는 Rails, Django, Laravel을 포함한많은 백엔드 프레임워크와의 통합을 유지 관리합니다. 백엔드 프레임워크가 목록에 없다면,이 가이드를 따라Vite 빌드를 백엔드와 수동으로 통합하세요.
설정이 작동하는지 확인하려면 프로젝트 폴더에서 다음 명령을 실행하세요:
npm install react react-dom그런 다음 메인 JavaScript 파일(index.js또는main.js일 수 있음) 상단에 다음 코드 줄을 추가하세요:
페이지 전체 내용이 "Hello, world!"로 대체되었다면 모든 것이 작동한 것입니다! 계속 읽어보세요.
2단계: 페이지 어디에서나 React 컴포넌트 렌더링하기
이전 단계에서는 메인 파일 상단에 이 코드를 넣었습니다:
물론, 실제로 기존 HTML 내용을 지우고 싶지는 않을 것입니다!
이 코드를 삭제하세요.
대신, HTML의 특정 위치에 React 컴포넌트를 렌더링하고 싶을 것입니다. HTML 페이지(또는 이를 생성하는 서버 템플릿)를 열고 고유한id속성을 태그에 추가하세요. 예를 들어:
이렇게 하면 document.getElementById로 해당 HTML 요소를 찾아createRoot에 전달하여 내부에 자체 React 컴포넌트를 렌더링할 수 있습니다:
index.html의 원본 HTML 내용은 유지되지만, 자체NavigationBarReact 컴포넌트가 이제 HTML의<nav id="navigation">내부에 나타납니다. 기존 HTML 페이지 내부에 React 컴포넌트를 렌더링하는 방법에 대해 자세히 알아보려면createRoot 사용법 문서를 읽어보세요.
기존 프로젝트에서 React를 도입할 때는 작은 상호작용 컴포넌트(예: 버튼)부터 시작하여 점차 "위로 올라가며" 결국 전체 페이지가 React로 구축되도록 하는 것이 일반적입니다. 그 지점에 도달하면 React를 최대한 활용하기 위해 바로React 프레임워크로 마이그레이션하는 것을 권장합니다.
기존 네이티브 모바일 앱에서 React Native 사용하기
React Native도 기존 네이티브 앱에 점진적으로 통합할 수 있습니다. Android(Java 또는 Kotlin) 또는 iOS(Objective-C 또는 Swift)용 기존 네이티브 앱이 있다면,이 가이드를 따라React Native 화면을 추가하세요.