[React] React를 사용해서 간단한 페이지 만들기

저는 웹사이트를 만들어본 경험이 거의 없고, React를 사용해본 경험도 거의 없습니다.

이전에 AWS Cloud Resume Challenge를 진행할 때는

HTML, CSS, 그리고 JavaScript만을 사용하여 개발했습니다.

 

이번 프로젝트에서 React를 사용하기로 결정하였고, 비록 제가 웹 담당은 아니지만,

제가 구현한 AI 기능을 프론트엔드에 띄워보고 싶어서 간단하게 만들어보았습니다.

실제로 React를 사용해보니 그 강력함에 놀랐습니다.

컴포넌트 기반 구조의 편리함, 상태 관리의 용이성, 그리고 코드 재사용성 등이 매우 편리했습니다.

 

특히, AWS Lambda와 RDS를 연결하여 AI 기능을 React 컴포넌트로

통합하는 과정이 매우 신기해서 이를 기록해보려고 합니다.

도입

 

사실 이게 기능별로 페이지를 하나씩 띄워보려고 했는데, 여러 개의 페이지를 하나로 운영해본 경험이 없어서

맨날 프로젝트를 하나씩 생성하다보니까 폴더만 4개가 되버렸네요..

그러다 보니 이게 매번 실행했다가 껐다 다른 프로젝트 실행시키고 하는 과정이

동시에 뭔가 테스트 해볼 수 있는 환경 자체가 부족하더라구요.

그래서 이참에 여러 페이지를 관리하면 어떨까 하면서 그 부분에 대해서 공부해봤습니다. 

 

React Router 사용

React에서 여러 페이지를 관리하려면 Router를 사용한다고 합니다. 

특히, SPA 내에서 여러 페이지를 쉽게 만들고 탐색할 수 있도록 해줍니다. 

Tree 구조

<BrowserRouter>, <Routes>, <Route> 컴포넌트 사용하기

 

<BrowserRouter>

HTML5 history API를 사용

 

<Routes>

Routes 컴포넌트는 여러 Route를 감싸고 있으며, 현재 location에 가장 알맞은 Route를 선택하여 렌더링합니다. 

 

<Route>

Route 컴포넌트는 현재 URL과 매칭되는 UI를 랜더링합니다. 

path : 매칭할 URL 경로

element : 경로가 매칭될 때 랜더링할 React 엘리먼트

 

프로젝트 디렉토리에서 npm install react-router-dom 명령어 실행

그리고 src 폴더 아래에 components 폴더를 생성해 주고, 각 React 컴포넌트를 별도의 파일로

관리하기 위해 사용하였습니다. 

App

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './components/Home';
import Upload from './components/Upload';
import HealthDataAnalyzer from './components/HealthDataAnalyzer';
import './HealthDataAnalyzer.css';

function App() {
  return (
    <Router>
      <div className="App">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/upload" element={<Upload />} />
          <Route path="/analyze" element={<HealthDataAnalyzer />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

 

Home

import React from 'react';
import { Link } from 'react-router-dom';

const Home = () => {
  return (
    <div className="container">
      <h1>Welcome to the Health Data App</h1>
      <nav>
        <ul>
          <li>
            <Link to="/upload">Upload Data</Link>
          </li>
          <li>
            <Link to="/analyze">Analyze Data</Link>
          </li>
        </ul>
      </nav>
    </div>
  );
};

export default Home;

 

 

 

Link 컴포넌트는 React 애플리케이션 내에서 페이지 간 탐색을 가능하게 해서, Link를 사용하면 페이지가

새로고침되지 않고 애플리케이션의 다른 경로로 이동할 수 있습니다. 

Home에서 upload와 analyze 페이지로 이동할 수 있도록 달아줬습니다.

 

Upload 

 

Upload 페이지의 경우에는 input으로 값들을 받은 뒤에 업로드 버튼을 누르면 

데이터들이 API Gateway의 엔드포인트로 전달합니다.

그러면 이제 Lambda 함수로 넘어가서 AWS RDS에 저장하는 매커니즘입니다.

 

HealthDataAnalyzer

HealthData

 

AWS RDS에 저장된 회원 정보 중에서 User ID를 입력하면,

해당 User ID를 API Gateway의 엔드포인트로 전달합니다.

그러면 Lambda 함수가 AWS RDS에서 해당 User ID로 된 회원의 건강 정보를 가져와,

Chat-GPT의 입력 값으로 프롬프트를 수정하여 원하는 결과를 반환하도록 합니다.

 

혹시라도 제가 잘못 기재한 부분이 있다거나 피드백이 필요한 부분은

댓글 남겨주시면 감사합니다 :)