Router, Firebase SDK 로그인 기능 구현

GY·2021년 10월 5일

리액트

목록 보기

5/54

Router

react router dom

리액트의 싱글페이지 앱을 멀티페이지처럼 느껴지도록 하기 위해 나온 라이브러리
멀티페이지처럼 페이지를 변경시키기 위해 url의 엔드포인트를 구분하는 것이 중요하다.

url 엔드포인트 정리 방식 중 하나 - Rest API

resource와 http method
만으로 어떤 작업을 요청하는지 알 수 있도록 구조를 짜는 API 구조방식

예)

resource
- www.~~~.com/goods
- goods라는 resource를 설정해 어떤 페이지인지 (예) goods-제품 상세페이지) 파악할 수 있도록 한다.
HTTP
- POST:: www.~~~.com/goods
- GET, POST, PATCH 등의 메소드를 활용해 어떤 요청인지 파악할 수 있도록 한다.

history, loacation은 변화하는 url의 엔드포인트를 기록해둔다.
뒤로가기를 눌렀을 때 이전 기록에 있는 이전 페이지로 이동할 수 있도록 해주고, 다른 페이지로 이동하는 버튼을 누르면 새로 이동할 페이지를 입력해준다.

match는 com/goods/359 처럼 resource 뒤에 아이디 값을 입력해 조회할 수 있도록 설정하는 파라미터이다.예)상품들 중 359번 상품의 상세페이지 url값 설정
이 359라는 번호를 받아오기 위해 matchParams를 사용한다.

component

A React component to render only when the location matches. It will be rendered with route props.

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route } from "react-router-dom";

// All route props (match, location and history) are available to User
function User(props) {
  return <h1>Hello {props.match.params.username}!</h1>;
}

ReactDOM.render(
  <Router>
    <Route path="/user/:username" component={User} />
  </Router>,
  node
);

When you use component (instead of render or children, below) the router uses React.createElement to create a new React element from the given component. That means if you provide an inline function to the component prop, you would create a new component every render. This results in the existing component unmounting and the new component mounting instead of just updating the existing component. When using an inline function for inline rendering, use the render or the children prop (below).

Router: history

history객체는 라우트로 사용된 컴포넌트에게 match, location과 함께 전달되는 props 중 하나이다.
브라우저와 리액트앱의 라우터를 연결하면, 라우터가 history api에 접근할 수 있다.
이 때 각각의 라우트와 연결된 컴포넌트에 props로 match, location, history 객체를 전달한다.

history 객체는 stack에 현재까지 이동한 url경로들이 담겨있는 형태로 주소를 임의로 변경하거나 되돌아갈 수 있도록 해준다.

· length : [number] 전체 history 스택의 길이
· action : [string] 최근에 수행된 action (PUSH, REPLACE or POP)
· location : [JSON object] 최근 경로 정보
· push(path, [state]) : [function] 새로운 경로를 history 스택으로 푸시하여 페이지를 이동
· replace(path, [state]) : [function] 최근 경로를 history 스택에서 교체하여 페이지를 이동
· go(n) : [function] : history 스택의 포인터를 n번째로 이동
· goBack() : [function] 이전 페이지로 이동
· goForward() : [function] 앞 페이지로 이동
· block(prompt) : [function] history 스택의 PUSH/POP 동작을 제어

withRouter HoC

withRouter HoC 는 라우트 컴포넌트가 아닌곳에서 match / location / history 를 사용해야 할 때 쓴다.

import { withRouter } from 'react-router-dom';
export default withRouter(WithRouterSample);

withRouter 를 사용하면, 자신의 부모 컴포넌트 기준의 match 값이 전달된다.

useHistory

The useHistory hook gives you access to the history instance that you may use to navigate.

import { useHistory } from "react-router-dom";

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

Switch

Switch 는 여러 Route 들을 감싸서 그 중 규칙이 일치하는 라우트 단 하나만을 렌더링한다.

path: string | string[]

Any valid URL path or array of paths that path-to-regexp@^1.7.0 understands.

<Route path="/users/:id">
  <User />
</Route>
<Route path={["/users/:id", "/profile/:id"]}>
  <User />
</Route>

Routes without a path always match.

exact: bool

When true, will only match if the path matches the location.pathname exactly.

path location.pathname exact matches? /one /one/two true no /one /one/two false yes

Firebase

1. firebase 프로젝트 만들기

2. SDK 설치 및 Firebase 초기화

npm을 사용하여 Firebase를 설치

npm install firebase

앱에서 Firebase를 초기화하고 Firebase 앱 객체를 만들기

import { initializeApp } from 'firebase/app';

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);

Firebase 앱은 일반적인 구성을 저장하고 Firebase 서비스 간에 인증을 공유하는 컨테이너와 유사한 객체이다. 코드에서 Firebase 앱 객체를 초기화한 후 Firebase 서비스를 추가하고 사용할 수 있다.

3단계: 앱에서 Firebase에 액세스

Firebase 서비스(Cloud Firestore, 인증, 실시간 데이터베이스, 원격 구성 등)를 개별 하위 패키지 내에서 가져올 수 있다.

예) Cloud Firestore Lite SDK를 사용하여 데이터 목록을 검색하는 방법

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
// Follow this pattern to import other Firebase services
// import { } from 'firebase/<service>';

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);

Firebase SDK로 로그인 과정 처리

Google 계정을 통해 Firebase에 사용자를 인증할 수 있도록
Firebase 자바스크립트 SDK로 로그인 과정을 처리한다.

Google 제공업체 객체의 인스턴스 생성

\
웹 버전 8

var provider = new firebase.auth.GoogleAuthProvider();

로그인 팝업 창 띄우기

Google 제공업체 객체를 사용해 Firebase에 인증할 때,
팝업 창을 사용하여 로그인하려면 signInWithPopup을 사용한다.

firebase.auth()
  .signInWithPopup(provider)
  .then((result) => {

로그인 상태 유지하기

인증 상태 관찰자 설정 및 사용자 데이터 가져오기

로그인한 사용자에 대한 정보가 필요한 각 앱 페이지에 대해 전역 인증 개체에 관찰자를 연결한다. 이 관찰자는 사용자의 로그인 상태가 변경될 때마다 호출된다.

onAuthStateChanged 메소드를 사용하여 관찰자를 연결한다. 사용자가 로그인했을때 관찰자를 통해 사용자에 대한 정보를 얻을 수 있다.

웹 버전 8

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/firebase.User
    var uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

로그아웃

사용자를 로그아웃시키려면 signOut을 호출한다.