TWIL 2012-4 (2)

1. Dynamic Routes 설계

메뉴 목록이 보이는 화면에서 PC, PDA 접속에 따라 목록이 다른 경우
UI 형태는 그대로이고 메뉴 개수와 이름만 변경되므로 두 개의 라우트가 아닌 한 개로 유동 라우팅 처리 한다.

// root/index.js
  <Route
    exact
    path={`${path}/menu/:type`}
    render={props => (
    <Menu {...{ ...props, path }} {...{ _state, _dispatch }} />
  )}

Menu 컴포넌트에서 match.params.type으로 구분하여 UI를 조건부 렌더링 한다.

const type = match.params.type;
switch (type) {
  case "pc": 
    // pc menu UI
    break;
  case "pdc" :
    // pda menu UI
    break;
  default;
    break;
}

🔗 Using Dynamic Routes in React

2. combineReducers

작업 중인 프로그램은 Context API와 useReducer hook으로 데이터를 관리한다. 하나의 디렉토리에서 pc 컴포넌트, pda 컴포넌트가 각각 독립적으로 데이터와 로직을 처리한다면 각자 별도의 actions와 reducer를 두고, 루트 reducer에서 이를 결합하는 구조가 좋다.

// root/reducer.js
import { combineReducers } from "redux";

import { initialState as pcState } from "./pc/reducer";
import { reducer as pcReducer } from "./pc/reducer";

import { initialState as pdaState } from "./pda/reducer";
import { reducer as pdaReducer } from "./pda/reducer";

export const initialState = {
  pc: pcState,
  pda: pdaState
};

export const reducer = combineReducers({
  pc: pcReducer,
  pda: pdaReducer
});

3. filter(Boolean)

배열 순회 시 배열 요소에 undefined나 null 등의 falsy값이 있을 경우를 처리하기 위해 보통 조건문을 사용한다.

const newArray = array.map(item => {
  if (!item) {
    // logic
  }
  // logic 
}

filter(Boolean)을 사용하면 더 간단히 처리할 수 있다.

const newArray = array.filter(Boolean).map(item => {
  // Item is always truthy!
})

🔗 The filter(Boolean) trick 👍

4. hard-coded text

비즈니스 로직 내에는 직접 입력한 문자열이 없는 것을 원칙으로 한다. 나열되는 메뉴 이름도 root/common.js 같은 곳에서 독립적으로 관리하는 습관을 들인다.