-
시작 전 로컬 개발 환경에 Node.js 설치는 필수!
기존 웹사이트의 하위 경로 전체에 React 사용하기
chopinoff.com이라는 기존 웹 앱에서 chopinoff.com/some-app/으로 시작하는 모든 경로를 React로 구현하고 싶을 때
- React 기반 프레임 워크 중 하나를 사용해 앱의 React 부분을 빌드함
- 사용하는 프레임 워크 설정에서 /some-app을 기본 경로로 명시함
- 서버 또는 프록시를 구성해 /some-app 하위의 모든 요청이 React 앱에서 처리되도록 함
기존 페이지의 일부분에 React 사용하기
React 컴포넌트를 통합하는 일반적인 방식임
- 모듈 자바스크립트 환경 설정하기
- JSX 구문을 사용할 수 있게 JS 환경 설정
- import / export 구문을 통해 코드를 모듈로 분리
- npm 패키지 레지스트리에서 패키지(React)를 사용
- 해당 페이지에서 원하는 위치에 React 컴포넌트를 렌더링하기
1. 모듈 자바스크립트 환경 설정하기
- 모듈 JS 환경은 각각의 React 컴포넌트를 개별 파일로 작성할 수 있게 함
- 또한 다른 개발자들이 npm 레지스트리에 배포한 패키지들을 모두 사용할 수 있음
이미 import 문을 이용해 파일로 분리하고 있다면: 기존 설정 사용
- 테스트: JS 코드에서 <div/>를 사용할 수 있는지 확인
- JSX를 사용하려면 Bable React 프리셋을 활성화해야 할 수 있음
애플리케이션이 JS 모듈을 컴파일하는 기존 설정이 없다면: Vite를 이용해 설정하기
- Vite는 다양한 백엔드 프레임워크와의 통합을 지원함 (수동으로 통합할 수도 있음)
설정이 제대로 동작하는지 확인
npm install react react-dom위 과정이 끝났다면 메인 JS 파일(index.js 혹은 main.js)의 최상단에 다음 코드를 추가함
- 화면 전체에 Hello, world만 렌더링 되면 성공
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>);2. 페이지 어디에서든 React 컴포넌트 렌더링하기
React 컴포넌트를 HTML의 특정 위치에 렌더링할 때
- HTML의 태그 안에 고유한 id를 추가함
<!-- ... html의 어딘가 ... --> <nav id="navigation"></nav> <!-- ... 더 많은 html ... -->- document.getElementById로 엘리먼트를 찾아 createRoot에 전달함으로써 해당 요소 내부에 React 컴포넌트 렌더링
- 원본 컨텐츠는 그대로 남기고 그 안에 React 컴포넌트를 작성함
- 기존 프로젝트에서 React를 도입할 때, 지금처럼 작은 상호작용 컴포넌트에서 시작해 점진적으로 상위 구조로 확장하면서 변경함
import { createRoot } from 'react-dom/client'; function NavigationBar() { return <h1>Hello from React!</h1>; } const domNode = document.getElementById('navigation'); const root = createRoot(domNode); root.render(<NavigationBar />);<!DOCTYPE html> <html> <head><title>My app</title></head> <body> <p>This paragraph is a part of HTML.</p> <nav id="navigation"></nav> <p>This paragraph is also a part of HTML.</p> </body> </html>'React.js > 기초' 카테고리의 다른 글
[React 공식 문서] 0-4. TypeScript 사용하기 (2) 2025.02.02 [React 공식 문서] 0-3. 에디터 설정하기 (0) 2025.02.01 [React 공식 문서] 0-1. 새로운 React 프로젝트 시작하기 (2) 2025.02.01