router의 react와 node.js에서의 쓰임새 정리

 

그저 페이지만 바꾼다면, react가 좋다

하지만 form까지 만들어서 각 페이지마다 데이터를 보낼 일처럼 서버와의 상호작용이 필요할 경우 node에서 router를 쓰는게 적합하다.

---

1. 단순 페이지 전환만 필요한 경우: React를 사용하여 클라이언트 사이드 라우팅을 구현하는 것이 적합합니다. React Router와 같은 라이브러리를 활용해 SPA(Single Page Application)에서 사용자가 다른 페이지로 이동할 때마다 서버에 새 페이지를 요청하지 않고 클라이언트 사이드에서 컴포넌트를 교체함으로써 페이지 이동을 처리할 수 있습니다. 이 방식은 사용자 경험을 향상시키고, 애플리케이션의 반응 속도를 높이는 데 유리합니다.
2. 폼 데이터를 서버로 전송해야 하는 경우: Node.js 백엔드에 라우터를 구현하는 것이 좋습니다. 예를 들어, Express.js와 같은 Node.js 프레임워크를 사용하여 서버 사이드 라우팅을 설정할 수 있습니다. 이때 각 라우트는 다른 HTTP 메소드(예: GET, POST, PUT, DELETE)를 처리하도록 구성되며, 클라이언트(React 앱)로부터 받은 폼 데이터를 처리하거나 데이터베이스와의 상호작용을 담당합니다.

따라서, 클라이언트 사이드에서의 페이지 전환과 UI 상호작용은 React를 통해 처리하고, 서버 사이드에서의 데이터 처리 및 폼 제출과 같은 서버와의 상호작용은 Node.js를 통해 처리하는 것이 일반적인 아키텍처입니다. 이렇게 분리하여 개발함으로써 각 기술의 장점을 최대한 활용할 수 있으며, 프론트엔드와 백엔드 간의 역할이 명확히 구분되어 개발 및 유지보수가 용이해집니다.

---

router를 node.js에서 쓴 경우 예시

 

싱글 페이지로 페이지 전환은 아래처럼 router 말고, id를 통해서 switch문을 통해서 구분이 가능.

<ul className="menu-items">

        {menuItems.map((item) => {

          return (

            <li

              key={item.id}

              onClick={() => setActive(item.id)}

              className={active === item.id ? "active" : ""}

            >

              {item.icon}

              <span>{item.title}</span>

            </li>

          );

        })}

      </ul>

---

app.jsx의 일부분. 이쪽에서 위의 정보를 받아서 출력.

const displayData = () => {

    switch (active) {

      case 1:

        return <Dashboard />;

      case 2:

        return <Dashboard />;

      case 3:

        return <Income />;

      case 4:

        return <Expenses />;

      default:

        return <Dashboard />;

    }

  };

  const orbMemo = useMemo(() => {

    return <Orb />;

  }, []);

  return (

    <AppStyled bg={bg} className="App">

      {orbMemo}

      <MainLayout>

        <Navigation active={active} setActive={setActive} />

        <main>{displayData()}</main>

      </MainLayout>

    </AppStyled>

  );

---

아래는 node.js에서 frontend에서의 전송 데이터를 받아서 각 페이지에 사용하는 코드이다.

const { addExpense, getExpense, deleteExpense } = require('../controllers/expense');

const { addIncome, getIncomes, deleteIncome } = require('../controllers/income');

const router = require('express').Router();

router.post('/add-income', addIncome)

    .get('/get-incomes', getIncomes)

    .delete('/delete-income/:id', deleteIncome)

    .post('/add-expense', addExpense)

    .get('/get-expenses', getExpense)

    .delete('/delete-expense/:id', deleteExpense)

module.exports = router