[week 14] React와 Express 연동 with Tanstack

Tanstack Router를 이용하여 React와 node js Express 연동

https://tanstack.com/router/latest/docs/framework/react/quick-start
공식 문서 참조

연동하면서 내가 그려본 다이어그램 (틀릴 수 있음)

---

main.jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { RouterProvider, createRouter } from '@tanstack/react-router'

// Import the generated route tree
import { routeTree } from './routeTree.gen'

// Create a new router instance
const router = createRouter({ routeTree })

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <RouterProvider router={router}/>
  </StrictMode>,
)

routeTree: 라우팅 트리의 네비게이션(Map) 역할을 함.
RouterProvider: React Router v6에서 라우팅 설정을 관리하고 하위 컴포넌트에게 라우팅 컨텍스트를 제공하는 핵심 컴포넌트입니다.

---

__root.jsx

import { createRootRoute, Link, Outlet } from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'

export const Route = createRootRoute({
    component: () => (
    <>
        <div>
            <Link to="/">Home</Link>{' '}
            <Link to="/topic">Topic</Link>
        </div>
        <Outlet />
        {/* <TanStackRouterDevtools /> */}
    </>
    )
});

createRootRoute: 최상위 라우트 정의
Link: <a href=""></a> 처럼 link 역할을 한다.
Outlet: 중첩된 라우트에서 자식 라우트의 컴포넌트를 렌더링하는 역할

• 예를 들어, /users 경로 아래에 /users/:id 와 같은 하위 경로를 만들 수 있습니다.

---

index.jsx

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/')({
  component: Index,
})

function Index() {
  return (
    <h3>Welcome Home!</h3>
  )
}

createFileRoute: 파일 기반 라우팅을 위한 설정 코드

---

topic.jsx

import { createFileRoute } from '@tanstack/react-router'
import { useEffect, useState } from "react";

export const Route = createFileRoute('/topic')({
  component: Topic,
})

function Topic() {
  const [topics, setTopics] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() =>  {
        const fetchTopics = async () => {
          try {
            setLoading(true);
            setError(false);
            
            const res = await fetch("http://localhost:3000/topic");

            if (res.status === 200) {
              const data = await res.json();
              setTopics(data);
            } else if (response.status >= 500) {
              setError("서버 오류가 발생했습니다.");
            } else {
              // 기타 상태 코드
              setError(`예상치 못한 오류가 발생했습니다. (${response.status})`);
            }
          } catch (error) {
            setError("네트워크 오류가 발생했습니다.");
            console.error("Fetch error:", err);
          } finally {
            setLoading(false);
          }
        };

        fetchTopics();
    }, []);

    
    if (loading) {
      return <div>로딩 중...</div>;
    }

    if (error) {
      return (
        <div>
          <h1>새 토픽 만들기</h1>
          <div style={{ color: 'red' }}>오류: {error}</div>
        </div>
      )
    }
    return (
      <>
        <h1>새 토픽 만들기</h1>
        <ul>
            {topics?.map(t => <li key={t.id}>{t.title}</li>)}
        </ul>
      </>
    );
}

useEffect

useEffect(() => {}, [])

• 2번째 인자인 []를 비워 두었을 때 최초 렌더링 시 한 번만 사용하겠다는 의미.
• 만약 2번째 인자에 값을 넣는다면 해당 값이 변경될 때마다 첫번째 인자 callback 함수가 실행된다.

핵심 역할

• side effect 관리
• 컴포넌트 생명주기 관련된 작업 처리 등

다양한 핵심 역할을 처리한다고 한다.
사실 사용하면서 익혀야 할듯.

const [topics, setTopics] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);

React의 state란?
컴포넌트를 만드는 내부자를 위한 데이터라는 설명.

그럼 외부자를 위한 데이터는?
props

async await 사용: fetch data를 기다린 후 status에 따른 처리.

---

app.js

const express = require('express');
// 개발 중에 문제가 생길 수 있기 때문에 추가하는 미들웨어
const cors = require('cors'); // Install with: npm install cors
const app = express();
const port = 3000;

app.use(cors({
    origin: 'http://localhost:5173' // 허용할 출처 지정
}));

app.get('/topic', async (req, res)=>{
    try {
        res.status(200).json([{id:1, title: "서버의 데이터 받기 성공!"}]);
    } catch (error) {
        res.status(500).json({ message: '서버 오류', error: error.message });
    }
    
})

app.listen(port, ()=>{
    console.log("Connected on port " + port);
});

cors: 다른 출처 접근 허용

• ex: localhost:5173 에서 localhost:3000번으로 접근하여 데이터를 로드 하려고할 때 cors를 설정하지 않으면 에러 발생

---

React와 Express를 활용한 간단한 json 데이터 주고 받기
작업 완료.