⚛️ React와 루비의 만남 - React 소개와 Rails 프로젝트에 통합하기

🎯 이번 시간 학습 목표

✅ 페이스북이 만든 UI 라이브러리, React.js가 무엇인지 이해합니다.
✅ 왜 Rails 프로젝트에서 React를 사용하는지 그 이유를 알아봅니다.
✅ Rails 7 이후의 기본 JavaScript 처리 방식인 Importmap과 esbuild를 간단히 살펴봅니다. (Webpacker도 간단히 언급)
✅ Rails 프로젝트를 생성할 때 React 설정을 포함하거나, 기존 프로젝트에 React를 추가하는 방법을 배웁니다.
✅ 간단한 React 컴포넌트를 작성하고 Rails 뷰(View)에 성공적으로 렌더링합니다.
✅ Rails 뷰에서 React 컴포넌트로 데이터를 전달(Props)하는 기초를 익힙니다.

지난 시간에는 Rails의 핵심인 라우팅, 컨트롤러, 뷰를 이용해 웹 페이지를 만드는 기본 흐름을 익혔습니다! ✨ 이제 사용자와 직접 상호작용하는 '화면' 부분을 좀 더 강력하고 동적으로 만들어 볼 시간입니다. 이를 위해 오늘 우리는 현대 웹 개발에서 가장 인기 있는 JavaScript 라이브러리 중 하나인 React.js를 만나볼 거예요. ⚛️ Rails라는 든든한 백엔드 위에 React라는 세련된 프론트엔드를 어떻게 얹을 수 있는지, 그 첫걸음을 함께 내딛어 봅시다! 🚀

✨ 오늘 배울 내용 미리보기

개념/도구/명령어	설명	간단 예시
`React.js`	사용자 인터페이스(UI) 구축을 위한 JavaScript 라이브러리	컴포넌트 기반 개발, 가상 DOM 활용
`Component`	UI를 구성하는 독립적이고 재사용 가능한 코드 조각	`function HelloWorld(props) { ... }`
`Importmap / esbuild`	(Rails 7+) Node.js 없이 브라우저에서 최신 JavaScript를 사용하게 돕는 도구	`bin/importmap pin react`
`Webpacker`	(Rails 6 이전) JavaScript, CSS 등을 번들링하는 도구 (Node.js 필요)	`webpacker-react` gem
`rails new ... --javascript=react`	React 설정을 포함하여 새 Rails 프로젝트 생성 (esbuild 기반)	`rails new my_react_app --javascript=react`
`react_component` 헬퍼	Rails 뷰에서 React 컴포넌트를 렌더링하는 메소드 (react-rails gem 제공)	`<%= react_component('HelloWorld', { greeting: '안녕!' }) %>`

📌 Rails 버전에 따라 JavaScript 처리 방식이 다를 수 있습니다. 이 강의는 주로 Rails 7+ 기준(Importmap/esbuild)으로 설명하지만, Webpacker 개념도 간단히 언급합니다.

🤔 React.js? 왜 갑자기 자바스크립트 라이브러리인가요?

React는 페이스북(현 메타)에서 만들어서 공개한 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리입니다. 왜 많은 개발자들이 Rails 프로젝트에 React를 사용할까요?

동적인 사용자 경험: 페이지 전체를 새로고침하지 않고도 화면 일부만 부드럽게 업데이트하여 앱처럼 느껴지는 웹사이트를 만들 수 있습니다. ✨
컴포넌트 기반 개발: UI를 레고 블록처럼 독립적인 '컴포넌트' 단위로 만들어 재사용하고 관리하기 용이합니다. 🧱
풍부한 생태계와 커뮤니티: 수많은 개발자들이 사용하고 발전시키고 있어 관련 자료, 라이브러리, 도구 등을 쉽게 찾을 수 있습니다. 🌍
관심사 분리: Rails는 데이터 처리와 비즈니스 로직(백엔드)에 집중하고, React는 사용자에게 보여지는 화면(프론트엔드)에 집중하여 역할을 명확히 나눌 수 있습니다. 🤝

물론 Rails 자체의 기능(Turbo, Stimulus 등)만으로도 충분히 동적인 웹사이트를 만들 수 있지만, 복잡한 UI나 싱글 페이지 애플리케이션(SPA)을 만들 때는 React와 같은 전문적인 프론트엔드 라이브러리가 큰 도움이 됩니다.

🛤️ Rails에서 JavaScript를 다루는 방법들 (feat. Importmap & esbuild)

Rails 프로젝트에서 React 코드를 사용하려면, Rails가 이 JavaScript 코드를 이해하고 웹 브라우저에서 실행될 수 있도록 처리하는 과정이 필요합니다.

Asset Pipeline (과거): Rails의 전통적인 방식으로, JavaScript 파일을 단순 연결하거나 압축하는 기능을 제공했습니다.
Webpacker (Rails 6 이전 기본): Node.js 환경 위에서 Webpack이라는 강력한 번들러를 사용하여 최신 JavaScript 문법(ES6+), 모듈 시스템, CSS 전처리기 등을 통합적으로 관리했습니다. 설정이 다소 복잡할 수 있다는 단점이 있었습니다.
Importmap & esbuild (Rails 7 이후 기본): Node.js 의존성을 제거하고, 브라우저의 표준 기능(Import Maps)과 빠른 빌드 도구(esbuild)를 활용하여 개발 환경을 단순화하고 속도를 높였습니다. 별도의 빌드 과정 없이 최신 JavaScript를 사용할 수 있게 해줍니다. 🚀

이 강의에서는 Rails 7 이후의 기본 방식인 Importmap과 esbuild를 사용하는 것을 기준으로 설명하겠습니다. 만약 Rails 6 버전을 사용 중이라면 Webpacker 설정을 참고해야 합니다.

⚛️ Rails 프로젝트에 React 통합하기

가장 쉬운 방법은 새 Rails 프로젝트를 만들 때 React 옵션을 주는 것입니다.


# 터미널에서 실행
# 'my_react_app'이라는 이름으로 React 설정을 포함한 새 Rails 앱 생성
rails new my_react_app --javascript=react --css=tailwind # CSS는 Tailwind 예시, bootstrap 등 선택 가능

# 생성된 프로젝트 폴더로 이동
cd my_react_app

이렇게 생성하면 Rails는 자동으로 esbuild를 사용하여 React 개발 환경을 설정하고, 필요한 Gem(`react-rails`)과 기본적인 JavaScript 설정(`app/javascript/application.jsx`)을 추가해줍니다. `application.jsx` 파일을 열어보면 React 컴포넌트를 로드하는 코드가 이미 준비되어 있을 거예요!

만약 기존 Rails 7+ 프로젝트(Importmap 사용)에 React를 추가하고 싶다면 다음 단계를 따를 수 있습니다.


# 1. react-rails Gem 추가
# Gemfile 에 다음 줄 추가:
# gem 'react-rails'
bundle install

# 2. react-rails 설치 스크립트 실행
rails g react:install

# 3. importmap을 이용해 react와 react-dom 라이브러리 고정(pin)
bin/importmap pin react react-dom

# 4. application.js 또는 application.jsx 에서 React 컴포넌트 로딩 설정 확인
# (react:install 과정에서 자동으로 설정될 수 있음)

React 컴포넌트 파일은 보통 app/javascript/components/ 폴더 안에 위치하게 됩니다.

👋 첫 React 컴포넌트 만들기 및 렌더링

이제 간단한 React 컴포넌트를 만들고 Rails 뷰에 표시해 봅시다. `app/javascript/components/` 폴더 안에 `HelloWorld.js` (또는 `.jsx`) 파일을 생성하고 다음 코드를 작성하세요.


// app/javascript/components/HelloWorld.js
import React from 'react';

// 함수형 컴포넌트 예시
function HelloWorld(props) {
  // props 객체를 통해 Rails 뷰에서 전달된 데이터를 받을 수 있습니다.
  const greetingMessage = props.greeting || "Hello from React!"; // 기본값 설정

  return (
    
      ⚛️ 첫 React 컴포넌트! ⚛️
      {greetingMessage}
      이 메시지는 React 컴포넌트에서 왔어요! 😉
    
  );
}

// 컴포넌트를 다른 파일에서 import 할 수 있도록 export 합니다.
export default HelloWorld;

📌 위 코드는 JSX 문법을 사용합니다. HTML과 비슷하지만 JavaScript 안에 XML 형태로 UI를 작성하는 방식입니다.

이제 이 컴포넌트를 Rails 뷰 파일에서 보여줘야 합니다. `react-rails` Gem은 `react_component`라는 편리한 헬퍼 메소드를 제공합니다. 예를 들어, `app/views/pages/hello.html.erb` 파일을 수정하여 방금 만든 컴포넌트를 렌더링해 봅시다.




🎉 환영합니다! 🎉
이 페이지는 app/views/pages/hello.html.erb 에서 만들어졌어요.




<%= @greeting %>
현재 시간: <%= @time.strftime("%Y년 %m월 %d일 %H시 %M분 %S초") %>



이제 React 컴포넌트를 렌더링합니다! 👇

<%# react_component 헬퍼 사용 %>
<%# 첫 번째 인자: 컴포넌트 이름 (파일 이름과 동일하게, 대소문자 주의) %>
<%# 두 번째 인자: 컴포넌트에 전달할 Props (Hash 형태로) %>
<%= react_component('HelloWorld', { greeting: @greeting }) %>


 

<%# 다른 Props를 전달해 볼까요? %>
<%= react_component('HelloWorld', { greeting: "Rails에서 보낸 또 다른 메시지!" }) %>

마지막으로, `app/javascript/application.js` (또는 `.jsx`) 파일에 우리가 만든 컴포넌트를 로드하도록 설정해야 합니다. `react:install`을 실행했거나 `--javascript=react` 옵션으로 프로젝트를 생성했다면 이미 설정되어 있을 수 있지만, 확인해보는 것이 좋습니다.


// app/javascript/application.js (또는 application.jsx)

// ... 다른 import들 ...
import React from 'react';
import ReactDOM from 'react-dom';

// react-rails 가 제공하는 기능을 사용하여 특정 폴더 아래의 모든 컴포넌트를 자동으로 로드
var componentRequireContext = require.context("components", true);
var ReactRailsUJS = require("react_ujs");
ReactRailsUJS.useContext(componentRequireContext);

// 또는 특정 컴포넌트만 로드하고 싶다면 수동으로 등록할 수도 있습니다.
// import HelloWorld from './components/HelloWorld';
// window.HelloWorld = HelloWorld; // 전역 객체에 등록 (권장 방식은 아님)

// HTML 문서 로드 후 실행될 코드
document.addEventListener('DOMContentLoaded', () => {
  // 여기에 추가적인 JavaScript 코드를 작성할 수 있습니다.
  console.log('Rails와 React 통합 준비 완료!');
});

이제 Rails 서버(`bin/rails s`)를 실행하고 해당 페이지(`http://localhost:3000/hello`)에 접속해보세요. Rails 뷰 안에 우리가 만든 React 컴포넌트가 멋지게 렌더링되고, Rails 컨트롤러에서 넘겨준 `@greeting` 메시지가 표시되는 것을 확인할 수 있습니다! 🎉

🤔 Webpacker::Manifest::MissingEntryError 오류가 발생하나요?
이 오류는 주로 Webpacker를 사용하는 환경(Rails 6 등)에서 발생하며, Webpack이 JavaScript 파일을 제대로 컴파일/번들링하지 못했음을 의미합니다. 터미널에서 ./bin/webpack-dev-server (개발 환경) 또는 rails assets:precompile (배포 환경) 명령어를 실행하여 JavaScript 번들이 생성되었는지 확인하세요. Node.js 및 yarn/npm 관련 설정도 점검해야 할 수 있습니다.
🤔 react_component 헬퍼를 찾을 수 없다는 오류가 뜨나요? (undefined method 'react_component')
react-rails Gem이 Gemfile에 추가되고 bundle install이 제대로 실행되었는지 확인하세요. Gem 설치 후에는 Rails 서버를 재시작해야 적용됩니다.
🤔 브라우저 콘솔에 React 관련 오류 (예: React is not defined)가 보이나요?
Importmap을 사용하는 경우, bin/importmap pin react react-dom 명령어가 제대로 실행되었는지, 그리고 `config/importmap.rb` 파일에 react 관련 설정이 올바르게 들어갔는지 확인하세요. JavaScript 파일 내에서 import React from 'react' 구문이 올바른지도 확인합니다.

✨ 백엔드와 프론트엔드의 조화로운 시작! ✨

정말 잘하셨습니다! 오늘은 강력한 프론트엔드 라이브러리인 React.js를 소개받고, Rails 프로젝트에 통합하여 첫 컴포넌트를 화면에 띄우는 것까지 성공했습니다. 🎉 Rails의 견고함 위에 React의 유연함을 더하는 첫 발을 내딛으신 거예요!

이제 Rails는 데이터 관리에, React는 사용자 인터페이스 표시에 각각 집중하여 더 효율적이고 전문적인 웹 애플리케이션 개발이 가능해졌습니다. 물론 오늘은 아주 기본적인 통합 과정만 다루었지만, 이 경험이 앞으로 더 복잡한 상호작용을 구현하는 데 든든한 밑거름이 될 것입니다. 😉

다음 시간에는 여기서 한 걸음 더 나아가, **Rails 백엔드에서 API를 만들고, React 프론트엔드에서 이 API를 호출하여 데이터를 주고받는 실전 연동** 방법을 배워보겠습니다. 진정한 풀스택 개발의 세계로 함께 떠나볼 준비, 되셨나요? 🚀 (다음 강의 예고: 🔗 2-2: 실전! Rails API와 React 연동 - 루비 백엔드 API 만들고 React에서 사용하기)

'루비' 카테고리의 다른 글

🛠️ Rails 핵심 기능 익히기 - 라우팅, 컨트롤러, 뷰로 CRUD 구현하기! (1)	2025.04.01
🔄 루비 문자열 최종장: slice(추출), to_i/to_f(숫자변환), concat(원본결합) 정복! (0)	2025.04.01
루비 문자열 탐색: 포함(include?), 시작/끝(start_with?/end_with?), 특정 위치 접근([]) 완벽 가이드 (0)	2025.03.31
루비 문자열 변환: upcase/downcase (대소문자 변경)와 strip (공백 제거) 마스터하기 (1)	2025.03.31
루비 문자열 기초: 길이 확인(length), 비었는지 검사(empty?), 결합(+) 완벽 정리 (0)	2025.03.31

루비 관련 글

🎯 이번 시간 학습 목표

✨ 오늘 배울 내용 미리보기

🤔 React.js? 왜 갑자기 자바스크립트 라이브러리인가요?

🛤️ Rails에서 JavaScript를 다루는 방법들 (feat. Importmap & esbuild)

⚛️ Rails 프로젝트에 React 통합하기

👋 첫 React 컴포넌트 만들기 및 렌더링

⚛️ 첫 React 컴포넌트! ⚛️

🎉 환영합니다! 🎉

<%= @greeting %>

이제 React 컴포넌트를 렌더링합니다! 👇

✨ 백엔드와 프론트엔드의 조화로운 시작! ✨

'루비' 카테고리의 다른 글

티스토리툴바