Node.js에 React 라우팅 기능 얹기

이은지·2022년 1월 5일

A url로 접속하면 A를 보내주는 것 = 서버의 역할

근데 이건 React가 더 잘함! 리액트 프로젝트 내에서의 라우팅도 가능함

리액트의 라우팅을 사용하면 서버의 역할이 훨씬 축소될 수 있다.
url에 따른 파일을 내보내는 건 리액트 내 라우터가 담당하고, 서버는 DB 입출력을 담당

리액트 라우터의 문제점

: 주소창에 직접 url을 입력하면 없다고 뜸
주소창에 입력을 하는 건 서버에 요청 해달라는 뜻이기 때문에!

리액트의 라우팅을 이용하고 싶으면 서버에 이 코드를 추가해야 한다.

app.get("*", function (req, res) {
  res.sendFile(path.join(__dirname, "build/index.html"));
});
// 사용자가 아무 url을 입력하면("*") 리액트 HTML을 보내라

이걸 추가하면 리액트의 라우팅이 먹힌다. localhost:3000 랑 똑같이 작동함.

예: /list 접속하면 DB에 있는 게시물 리스트를 사용자에게 보여주어야 하는 상황

url에 따른 html 보내는 건 React가(라우터), DB에 데이터 입출력하는 건 Node.js가 함
이때 이 둘은 Ajax를 통해 소통함

라우터 기능을 이용, /list 접속 시 List.js 컴포넌트 보여주기

근데 게시물 데이터가 DB에 있죠? 따라서 리액트는 List.js 컴포넌트가 렌더링되기 전에 서버에 Ajax 요청을 함. “DB에서 데이터 좀 꺼내줘~”

Ajax 요청이 오면 DB에 있던 게시물 데이터를 리액트에 보내줌
(server.js에 Ajax 요청을 받고 요청에 맞는 데이터를 보내주는 코드를 작성)