상식닷컴
로그인
가입하기
2026년 상식닷컴 선정 식당 & 카페 리스트
2025년 2026년 신상 호텔 리스트
최근에 오픈한 호텔을 찾는다면 살펴보세요
일주일 식단표 어플
자동 일주일 식단표 어플
안드로이드
아이폰
주식 & 코인 차트의 신
1000만원으로 2000만원 만들기 프로젝트
궁금한 상식 보기
소개팅에서의 대화 중 가장 기억에 남는 순간은?
소개팅에서의 첫 만남 이후 연락을 어떻게 이어가나요?
소개팅에서 상대방의 취미를 알아보는 질문은?
가톨릭의 신앙에서의 용서의 의미는 무엇인가요?
가톨릭의 신앙에서의 진리의 의미는 무엇인가요?
개신교의 교회 건축 양식은 어떤 특징이 있나요?
종교적 신념이 평화 구축에 미치는 영향은 무엇인가요?
쿤밍의 밤문화는 어떤가요?
쿤밍에서의 자전거 타기 좋은 장소는 어디인가요?
밀라노의 전통 의상은 어떤 모습인가요?
럭비의 훈련 시 주의해야 할 점은 무엇인가요?
럭비에서의 경기 중 발생하는 심판의 판정은 어떻게 이루어지나요?
Previous
Next
수정하기 - 리액트에서 "라우팅(Routing)"을 처리하기 위한 라이브러리는 무엇인가요? 그 사용 방법은?
닉네임
비밀번호
제목
내용
[이미지 업로드는 권한이 있는 사람만 가능. 하단 카톡으로 연락]
리액트에서 "라우팅(Routing)"을 처리하기 위한 가장 인기 있는 라이브러리는 R<a href='https://sangseek.com/sangseeks/eact Router/ko'>eact Router</a> 입니다. <a href='https://sangseek.com/sangseeks/React Router/ko'>React Router</a>는 SPA(Single Page Application)에서 페이지 간의 전환을 쉽게 관리할 수 있도록 도와주는 라이브러리입니다. 이 라이브러리를 사용하면 URL에 따라 다른 컴포넌트를 렌더링할 수 있으며, 브라우저의 히스토리 API를 활용하여 사용자 경험을 개선할 수 있습니다. React Router 사용 방법1. <a href='https://sangseek.com/sangseeks/설치하기/ko'>설치하기</a> React Router를 사용하기 위해 먼저 라이브러리를 설치해야 합니다. npm 또는 yarn을 사용하여 설치할 수 있습니다. ```bash npm install react-router-dom ``` 또는 ```bash yarn add react-router-dom ```2. 기본 설정 React Router를 사용하기 위해 <a href='https://sangseek.com/sangseeks/애플/ko'>애플</a>리케이션의 최상위 컴포넌트에서 `B<a href='https://sangseek.com/sangseeks/rowserRouter/ko'>rowserRouter</a>`로 감싸줍니다. 예를 들어, `App.js` 파일에서 다음과 같이 설정할 수 있습니다. ```jsx import React from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import Home from './Home'; import About from './About'; import NotFound from './NotFound'; function App() { return ( <Router> <Switch> <Route path="/" exact component={Home} /> <Route path="/about" component={About} /> <Route component={NotFound} /> </Switch> </Router> ); } export default App; ``` 위의 코드에서 `BrowserRouter`는 라우팅을 위한 컨테이너 역할을 하며, `Switch`는 자식 `Route` 중에서 URL에 맞는 첫 번째 경로만 렌더링합니다.3. 라우트 설정 각각의 `Route` 컴포넌트는 `path`와 `component` 속성을 가집니다. `path`는 URL 경로를 정의하고, `component`는 해당 경로에 매칭될 컴포넌트를 지정합니다. `exact` 속성을 사용하면 경로가 정확히 일치할 때만 해당 컴포넌트를 렌더링합니다.4. 링크 생성 페이지 간의 이동을 위해 `Link` 컴포넌트를 사용합니다. `Link`를 사용하면 페이지를 새로 고침하지 않고도 다른 페이지로 이동할 수 있습니다. ```jsx import { Link } from 'react-router-dom'; function Navigation() { return ( <nav> <Link to="/">Home</Link> <Link to="/about">About</Link> </nav> ); } ```5. 동적 라우팅 URL 파<a href='https://sangseek.com/sangseeks/라미/ko'>라미</a>터를 사용하여 동적 라우팅을 설정할 수도 있습니다. 예를 들어, 특정 ID를 가진 사용자 프로필 페이지를 만들고 싶다면 다음과 같이 설정할 수 있습니다. ```jsx <Route path="/user/:id" component={UserProfile} /> ``` `UserProfile` 컴포넌트에서는 `us<a href='https://sangseek.com/sangseeks/eParams/ko'>eParams</a>` 훅을 사용하여 URL 파라미터를 가져올 수 있습니다. ```jsx import { useParams } from 'react-router-dom'; function UserProfile() { const { id } = useParams(); return <div>User Profile for ID: {id}</div>; } ``` 결론React Router는 리액트 애플리케이션에서 라우팅을 간편하게 처리할 수 있도록 도와주는 강력한 도구입니다. 위의 기본적인 사용 방법을 통해 SPA에서 페이지 간의 전환을 쉽게 구현할 수 있습니다. 추가적으로, React Router는 중첩 라우팅, 리다이렉션, 보호된 라우트 등 다양한 기능을 제공하므로, 필요에 따라 문서를 참고하여 더 많은 기능을 활용할 수 있습니다.
이용안내
커뮤니티 이용안내
×
- 게시한 게시글로 발생하는 문제는 게시자에게 책임이 있습니다.
- 게시글이 타인/타업체의 저작권을 침해할 경우 모든 책임은 게시자에게 있습니다. 게시자가 모든 손해를 부담해야 합니다.
- 상식닷컴 운영자는 게시자와 상의하지 않고 게시글을 수정 또는 삭제할 수 있습니다.
- 상식닷컴 운영자는 깨끗한 커뮤니티 공간을 만드는 것이 1순위입니다.
수정하기
취소하기