리액트 라우팅(Routing) 설정하기
React Router 설치 및 설정
리액트에서 라우팅을 설정하려면 react-router-dom 패키지를 설치해야 합니다. 먼저, npm install react-router-dom 명령어로 이 패키지를 설치합니다. 설치 후, BrowserRouter, Route, Switch 컴포넌트를 사용하여 라우팅을 설정합니다. BrowserRouter는 브라우저의 주소를 관리하며, Switch는 하나의 경로에 대해서만 컴포넌트를 렌더링하도록 합니다. Route 컴포넌트를 사용하여 특정 URL 경로에 해당하는 컴포넌트를 정의합니다.
기본 라우팅 설정하기
리액트에서 기본적인 라우팅을 설정할 때는 Route 컴포넌트를 사용합니다. 예를 들어, Route path="/" component={Home}와 같이 설정하면, 사용자가 / 경로로 이동했을 때 Home 컴포넌트가 렌더링됩니다. 여러 개의 Route를 사용하여 각각의 URL 경로에 맞는 컴포넌트를 매핑할 수 있습니다. exact 속성을 사용하여 정확히 해당 경로일 때만 렌더링하도록 할 수 있습니다. Switch 컴포넌트는 매칭되는 첫 번째 경로만 렌더링하므로, 이를 활용하면 경로 매칭의 우선순위를 지정할 수 있습니다.동적 라우팅 (Dynamic Routing)
동적 라우팅은 URL 경로에서 파라미터를 받아서 동적으로 다른 내용을 렌더링하는 방식입니다. 예를 들어, Route path="/user/:id"와 같이 설정하면, URL에서 :id 부분이 동적 파라미터로 사용되어, 이를 통해 사용자 정보를 보여주는 컴포넌트를 렌더링할 수 있습니다. 컴포넌트 내부에서 useParams 훅을 사용하여 경로 파라미터를 받아올 수 있습니다. 이렇게 동적 라우팅을 사용하면, 한 컴포넌트에서 여러 데이터를 처리하고 화면을 변경할 수 있습니다.
프로그램적 네비게이션 (Programmatic Navigation)
프로그램적으로 라우트를 변경하려면 useHistory 또는 useNavigate 훅을 사용할 수 있습니다. 이 훅들은 라우팅을 동적으로 제어할 수 있게 도와줍니다. 예를 들어, 버튼 클릭 시 특정 경로로 이동하도록 하려면 history.push('/new-path') 또는 navigate('/new-path')를 호출하면 됩니다. 이 방법을 통해 사용자가 특정 작업을 완료한 후 자동으로 다른 페이지로 이동하게 할 수 있습니다. Link 컴포넌트를 사용한 네비게이션 외에도 이 방법을 통해 보다 동적인 흐름을 만들 수 있습니다.네스트된 라우팅 (Nested Routing)
리액트에서는 라우트를 중첩하여 사용할 수 있습니다. 부모 컴포넌트 내에서 자식 라우트를 정의하여 계층적인 구조를 만들 수 있습니다. 예를 들어, Route path="/dashboard" component={Dashboard} 내부에 또 다른 Route를 정의하여 Dashboard 내부의 다른 페이지로 이동할 수 있습니다. Switch와 Route를 중첩하여 구성할 수 있으며, 이 방법을 통해 더 복잡한 UI를 다루는 애플리케이션을 만들 수 있습니다. 자식 라우팅을 사용하면, 사용자 경험을 더 직관적으로 만들 수 있습니다.