[개발 일지] 게시판(SPA)

SPA

사용배경

SPA는 Single-Page-Application의 약자로 말 그대로 하나의 페이지에서 필요한 부분만 불러와서 렌더링 한다는 의미이다. 즉 Header나, Nav같은 중복되는 요소들을 매번 불러오지 않고 필요한 부분만 렌더링 한다.
이 프로젝트를 진행하면서 href나 새로고침 등 전체 페이지를 불러오는 기능들은 제외하였다.

Router

React에서 SPA를 구현하기 위해서 필요한 라이브러리는 Router이다.

root에다 Routing을 렌더링 한다.

Routing 컴포넌트인데 리액트에서 라우트를 사용하려면 다음과 같이 적용해야 한다. 즉 url에 /join이 호출되면 Join 컴포넌트가 렌더링 될 것이고 url에 /Board가 호출되면 BoardMain 컴포넌트가 렌더링 될 것이다. 이렇게 하여 SPA를 구현할 수 있다.

클라이언트에서 router 사용하기

Link

HTML에서 a태그의 href를 생각하면 될 것 같다. React에서 Link태크와 to를 사용하면 해당 라우터에 있는 컴포넌트가 렌더링 된다.

navigate

자바스크립트에서 window.location.href에서 페이지 이동을 했으면 리액트에서 useNavigate함수를 사용하여 페이지 이동을 한다.

router를 사용하다가 발생한 오류 정리

1. router는 클래스 컴포넌트에서는 사용하지 못한다. 함수 컴포넌트에서만 사용해야 한다.

2. useNavigate함수 사용할 때에는 BrowserRouter안에서만 사용가능하다.

즉 BrowserRouter안에 있는 컴포넌트 Header~BoardWrite컴포넌트에서 useNavigate함수를 사용할 수 있다.