[티켓 예매 프로젝트] 3. 얻어간 것들

프로젝트를 하면서 얻어간 지식과 경험을 몇개 정리해본다. 레오가 많이 알려주고 도와주었다.

 

---

 

1. 리덕스 활용

처음 리덕스를 공부할 때 읽었던 책에서 Ducks 패턴을 배웠다. 막상 써보려니까 괜히 복잡한 느낌이 들어서 그 후로 리덕스를 별로 안 좋아했던... 기억이.. 이번에 쓰게된 구조는 아래와 같다. 리덕스 공식 사이트에 적혀있는 것과 비슷할걸? 액션 타입, 액션 생성함수 그리고 리듀서를 각각 하나의 폴더에 담는다. 한가지 기능을 수정할 일이 생겼을 때 3개의 파일을 모두 건드려야 한다는 단점으로 어쩌구저쩌구 하는 글들을 많이 봤는데, 파일 하나에 타입, 액션, 리듀서 다 때려박아서 코드 길어지는게 더 오히려 불편했다. 개인적으로는 더 마음에 드는 방식이다.

 

reducer/index.js 은 불러온 각 파일들을 combineReducer로 묶어서 export하는 역할만 하고

storeSetting.js에서 데브툴즈, thunk, createStore 등의 다른 세팅들을 해준다.

 

// 인증된 상태일때 강제로 accessToken 불러오는 자리(initial 리덕스 에 집어넣기 위함 (새로고침 시))
const userAccessToken = localStorage.getItem('userAccessToken');
const phoneNumber = localStorage.getItem('phoneNumber');

// axios Bearer 토큰에 커먼 헤더로 껴놓기 위함
axios.defaults.headers.common.Authorization = `Bearer ${userAccessToken}`;

/**
* ...
**/

export const store = createStore(
  reducers,
  {
    // initial state for autheticated
    auth: {
      authenticated: userAccessToken === null ? false : true,
      userAccessToken: userAccessToken === null ? null : userAccessToken,
      phoneNumber: phoneNumber === null ? null : phoneNumber
    },
    routePagination: {
      currentPage: firstPathName
    }
  },
  enhancer
);

storeSetting.js 의 일부이다. 로컬스토리지에 있는 값들을 가져와서 initial state에 넣어둔다. 파일을 index.js에 import 시켜놓았기 때문에 매번 새로고침할때마다 바로바로 실행된다.

 

인상깊었던 것은 axios default를 설정해주는 부분이었다. 이전에는 토큰이 필요한 요청을 보낼때마다 매번 헤더를 넣어서 보냈었다. 헤더를 디폴트로 넣어줄 수 있다. 그걸 매번 페이지가 새로고침될 때마다 해주기 때문에 요청에 따로 헤더를 넣어줄 필요가 없다.

 

 

2. react-router-dom , history 활용

import {
  MESSAGE_SEND_SUCCESS,
  MESSAGE_SEND_PENDING,
  MESSAGE_SEND_ERROR
} from '../action-types';
import axios from 'axios';
import history from '../../history';

export const messageSend =
  ({ phoneNumber }) =>
  async dispatch => {
    try {

    /**
    * ..
    **/

      // 자동으로 다음 단계로 넘어가게 끔
      history.push('/auth/validation');
    } catch (e) {
      //400 ~
      dispatch({ type: MESSAGE_SEND_ERROR, payload: '메시지 전송 오류' });
    }
  };

액션 생성함수에 있는 한 파일을 들고와 보았다. '다음으로 가기' 같은 버튼에 달린 액션이다. 리덕스 thunk를 이용하고 있고, axios 비동기 처리를 한 후에 history.push(...)로 다음 단계로 넘어가도록 했다.

 

보통은 useNavigate 등을 이용해서 라우팅을 하는데, 위의 함수는 리액트 컴포넌트 내에서 쓰이는게 아니기 때문에 사용할 수 없다. 그렇기 때문에 따로 history 객체를 설정을 해준 다음에 가져와서 사용해주어야 한다.

 

import history from '../../history' 가 바로 그 부분이다.

 

import { createBrowserHistory } from 'history';
import { routeChange } from './state/actions-creators';
import { store } from './state/storeSetting';
const history = createBrowserHistory();

history.listen(({ action, location }) => {
  console.log(action, location);
  store.dispatch(routeChange({ pathname: location.pathname }));
});
export default history;

history.js 이다. createBrowserHistory() 로 히스토리를 생성하고,

 

import React from 'react';

/**
* ..
**/
import history from './history';

import {
  Routes,
  Route,
  unstable_HistoryRouter as HistoryRouter
} from 'react-router-dom';

/**
* ..
**/

ReactDOM.render(
  <HistoryRouter history={history}>
    <Provider store={store}>
      <Routes>
        <Route path="/" element={<LandingPage />} />
        <Route path="/*" element={<Pagination />} />
      </Routes>
    </Provider>
  </HistoryRouter>,
  document.getElementById('root')
);

index.js 로 가져와 import 한다. BrowserRouter가 아닌 HistoryRouter로 컴포넌트들을 감싸고, history 객체를 전달해준다. 참고

 

이렇게 하면 history를 전역으로 관리할 수 있다.

 

 

3. HOC 활용

인증이 되어있을 때만 들어갈 수 있는 페이지에 접근을 막을 방법으로 HOC를 이용했다.

 

import React from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
import authPassHOC from '../../hoc/authPassHOC';
import requireAuth from '../../hoc/requireAuth';
import ListLandingPage from './ListLandingPage/ListLandingPage';
import TicketListPage from './TicketListPage/TicketListPage';

function ListProcess({ location }) {
  // 인증되어있으면 랜딩페이지 넘기고 바로 티켓리스트로
  const APHTicketListPage = authPassHOC(ListLandingPage, '/list/mytickets');
  // 인증 안되어있으면 인증페이지로,
  const RATicketListPage = requireAuth(TicketListPage);

  return (
    <Routes location={location}>
      <Route
        exact
        path="landing"
        element={<APHTicketListPage style={{ position: 'absolute' }} />}
      />
      <Route
        exact
        path="mytickets"
        element={<RATicketListPage style={{ position: 'absolute' }} />}
      />
      {/*이상한 url로 들어올경우 홈페이지로 이동*/}
      <Route path="*" element={<Navigate to="/" />} />
    </Routes>
  );
}

export default ListProcess;

예매한 티켓을 볼 수 있는 페이지를 위한 컴포넌트들을 관리하는 함수이다. 'list/landing'은 인증이 되어 있지 않을 때만 보여줘야 하고 'list/mytickets'는 인증이 되어있을 때만 보여줘야 한다. 라우트 안에서 해당 컴포넌트를 렌더링 하기 전에 hoc로 한번 감싸서 인증 여부를 확인한 후에 넘겨준다.

 

import React from 'react';
import { useSelector } from 'react-redux';

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

/**
* 인증이 되어있으면 다음 페이지로 넘김
**/
const authPassHOC =
  (Component, nextUrl) =>
  ({ ...props }) => {
    const { authenticated } = useSelector(state => state.auth);

    return authenticated === true ? (
      <Navigate to={nextUrl} />
    ) : (
      <Component {...props} />
    );
  };

export default authPassHOC;


/**
* 인증이 안되어있으면 메인 페이지로 돌려보냄
**/
const requireAuth =
  Component =>
  ({ ...props }) => {
    const { authenticated } = useSelector(state => state.auth);

    return authenticated === true ? (
      <Component {...props} />
    ) : (
      <Navigate to="/" />
    );
  };

export default requireAuth;

hoc의 구조는 위와 같다. 간단하다. 스토어에서 값을 가져오고 인증 유무에 따라 렌더링할 컴포넌트를 정해준다.

 

이전에는 페이지에 진입한 후에 인증 유무를 확인하고 다시 돌려보내는 방식으로만 했었다. 하지만 이렇게 컴포넌트를 렌더링 하기 전에 hoc 안에서 한번 검증을 거치는 과정을 통해 더 자연스러운 흐름을 가져갈 수 있다.