INTHEJ BLOG

😎 서론

오늘은 리액트에서 동적 라우팅을 사용하여 페이지 모드를 어떻게 활용하는지 작성합니다. 게시판 화면을 만들어 보면서 등록, 수정, 상세의 화면을 단 하나의 페이지에서 관리하는 것이 목표였습니다. 이를 리액트로 개발하면서 페이지 간의 이동 및 데이터의 활용을 어떻게 해야 효과적으로 구현할 수 있을까? 고민하다가 동적 라우팅 활용을 알게 되었습니다.

😃 페이지 모드의 정의

먼저, AppTypes 파일에서 페이지의 모드를 관리합니다.

const AppTypes = {
  PageMode: {
    view: 'view',
    add: 'add',
    edit: 'edit',
  },
  ...
}

페이지의 모드는 view, add, edit 세 가지로 구분됩니다. 위 코드처럼 App 에서 활용된느 각 모드 타입을 별도의 파일로 분리하여 관리하면 프로젝트의 구조가 더욱 명확해지고 유지 보수가 쉬워집니다.

🌟 리액트 라우터의 활용

리액트에서 페이지간의 이동을 관리하는 가장 효과적인 방법 중 하나는 리액트 라우터를 활용하는 것입니다. 특히 동적 라우팅은 동일한 UI 구조를 가지면서 다양한 데이터를 보여주는 페이지를 구현할 때 매우 유용합니다. 페이지 모드를 활용해 라우터에서는 다음과 같이 경로와 컴포넌트를 연결해 주었는데요..

import { Navigate, Route, Routes } from 'react-router-dom'

const App = () => {
  return (
    <Routes>
      <Route path="/board/list" element={<LayoutWithComponent layout={EmptyLayout} component={Board} />} />
      <Route path="/board/view/:id" element={<LayoutWithComponent layout={EmptyLayout} component={BoardView} />} />
      <Route path="/board/:mode" element={<LayoutWithComponent layout={EmptyLayout} component={BoardView} />} />
      ...
    </Routes>
  )
}

/board/:mode 경로와 같이 동적 라우트 방식으로 게시판의 다양한 모드를 효율적으로 사용하고 있습니다.

이렇게 재사용성을 높이면 개발 과정에서의 복잡도를 줄일수 있습니다.

동적 라우팅으로 페이지를 넘기는 이벤트 핸들러 코드 예시입니다.

const handleAddClick = useCallback(() => {
  navigateTo(`/board/${AppTypes.PageMode.add}`)
}, [navigateTo])

const handleRowClick = useCallback((id) => {
  navigateTo(`/board/view/${id}`)
}, [navigateTo])

다양한 상황에 따라 유연하게 URL을 구성하여 해당 URL 에 맞는 페이지로 라우팅 할 수 있습니다.

📑 페이지 모드 관리

View 에서는 게시글의 상세 내용을 보여주며, 각각의 모드에 따라 적절한 액션 버튼들을 제공합니다. useParams를 사용하여 라우트에서 필요한 매개변수를 가져와 상태를 지정하였습니다.

const BorderView = () => {
  const { mode, id } = useParams() // mode: AppTypes.PageMode
  const [currentMode, setCurrentMode] = useState(mode || AppTypes.PageMode.view)
...
}

이렇게 할 경우 조건부 렌더링을 활용하여 현재 모드에 따라 다른 UI 요소를 보여줄 수 있습니다.

{currentMode === AppTypes.PageMode.view && (
  <>
    <button type="button" className="list-btn" onClick={handleListClick}>목록으로</button>
    <button type="button" className="edit-btn" onClick={handleEditClick}>편집</button>
  </>
)}

{currentMode !== AppTypes.PageMode.view && (
  ...
)}

이 외에도 각 모드에 따라 다른 이벤트 핸들러를 설정하거나 데이터를 요청하는 등의 동작을 분기처리할 수 있습니다.

const onSubmit = useCallback(async (data) => {
  const payload = {
    ...data
  }
  
  try {
    if (currentMode === AppTypes.PageMode.add) {
      await BoardService.create(payload)
      navigateTo('/board')
    }
  
    if (currentMode === AppTypes.PageMode.edit) {
      await BoardService.update(id, payload)
      navigateBack()
    }
  } catch (err) {
    handleError(err.response)
  }
}, [currentMode, id, navigateTo, navigateBack, handleError])

🔄 페이지 모드 변경하기

useState 에 선언한 setCurrentMode 함수를 통해 페이지의 동작 모드를 변경하여 이를 통해 사용자의 액션(예: 편집 버튼 클릭)에 따라 동작 모드를 변경하고, 그에 따른 UI를 갱신할 수 있습니다.

const handleEditClick = useCallback((e) => {
  e.preventDefault()
  setCurrentMode(AppTypes.PageMode.edit)
}, [])

🎬 결론

리엑트 라우터의 동적 라우팅을 활용하면, 사용자의 요청에 따라 페이지의 내용과 상태를 유연하게 변경할 수 있습니다. 페이지 모드의 관리와 라우팅을 최적화하는 방법을 살펴봤는데, 리엑트 프로젝트에서 이 기법을 적용하면 사용자 경험은 물론, 개발자의 작업 효율도 상당히 증진될 것이라 생각합니다. 🙂