로그인 페이지를 만드는 과정

npm start… 무조건 코드를 복붙하고, 오류메시지만 보면서 막상 제대로 된 사이트를 띄워보지 못한지 오래됐다.

오류메시지만 해결하면 괜찮을거라고 생각했지만 오류메시지가 해결 했는데도 흰 화면만 떠있을 때의 허무함이란 정말 막막했다.

오늘은 ‘로그인’을 우선적으로 구현해야겠다고 생각했던 과거를 뒤로하고

리액트 라우터를 이용하여 웹사이트를 구동해보기로 했다.

참고 사이트 : https://thebook.io/080203/ch13/02/04/

학습하며 알게된 리액트 지식을 정리한 글입니다.

리액트 라우터란?

  • HTML5의 History API를 이용해서 페이지를 새로고침하지 않고 주소를 변경하고, 쉽게 조회하거나 사용할 수 있도록 해 준다.
적용방법

src/index.js 파일에서 react-router-dom에 내장되어 있는 BrowserRouter라는 컴포넌트를 사용해 감싸면 된다.

import { BrowserRouter } from 'react-router-dom';

상단에 import를 해주고,

  <BrowserRouter>
    <App />
  </BrowserRouter>

본문에 BrowserRouter를 구동할 컴포넌트를 감싸주면 된다.

Route 컴포넌트

  • 페이지를 쓸모있게 만들어줄 수 있는 컴포넌트이다. 앞으로 프로젝트를 진행하면, src/pages/ 하위파일로 페이지들을 만들게 될 것이다.

  • 각각의 페이지들은 각각의 주소를 갖는다. 예를 들어 http://localhost:3000/about 와 같이… 이렇게 각각 주소를 가지고 접근 가능하게 해주는 컴포넌트이다.

적용방법
<Route path=“주소규칙“ component={보여 줄 컴포넌트} />
  • 이는 Route 컴포넌트와 유사한 기능을 한다. 이 기능은 HTML의 a태그와 거의 같다고 보면 된다. a태그와의 차이점은 페이지를 새로 불러오지 않고 애플리케이션은 그대로 유지한 상태에서 HTML5 History API를 사용하여 페이지의 주소만 변경해준다.

즉, 페이지 변경을 방지한다.

적용방법
<Link to=“주소“>내용</Link>

정말 많이 대강이지만, 대략적인 페이지 구성을 만들었다.

아직 로그인과 회원가입 페이지에는 ‘회원가입’, ‘로그인’ 문구밖에 없지만 오늘은 그래도 react가 즐거운 날이었다.