안녕하세요. 후르륵짭짭입니다.
요즘에 개인적으로 하고 싶은게 있어서 React를 공부하고 있습니다.
Web공부를 제대로 해본적이 없어서,,, CSS HTML에 익숙하지 않아서 공부할게 많더라구요 ㅎㅎㅎㅎ
React 공부한 걸 적어봐야지 마음은 먹었지만, 너무 간단한 것들이라 생각해서 안 올렸는데,
React Router Dom은 나름 쫌 알아야겠더라고요.
취미생활로 하는 글이다 보니 참고용으로 해주세요 ㅋㅋㅋㅋ
(IOS만 하다보니 기본적인 상식인 Web를 잘 못 하던거 반성 중 ㅠㅠ)
** Router Dom이란 **
Router Dom이란 URL의 링크에 따라 Component를 생성해주는 겁니다.
React는 SPA(single page application)입니다.
물론 하나의 URL 링크로 사용자에게 페이지를 보여줄 수 있습니다.
하지만 사용자가 특정 페이지로 이동하고 싶지만, 그럴수 없게 되죠.
이때 Router Dom을 사용하는 겁니다.
** 프로젝트 결과물 **
** 설치하기 및 라우터 시작하기 **
npm install react-router-dom@6
일단 해당 프로젝트로 들어가 위 커맨드를 통해 라우터를 설치해주세요.
그리고 Index.js(도입부)에서 아래와 같이 라우터를 사용하겠다고 알려줍니다.
BrowerRouter는 Router를 사용하겠다는 전체적인 Wrap과 같은 겁니다.
이때 중요한것이 Import에 'react-router-dom'을 해주셔야합니다.
import {BrowserRouter as Router} from 'react-router-dom'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Router> //BrowserRouter의 이름이 길어 Router라고 변경하여 사용
<App />
</Router>
);
** 링크 설정해주기 **
import { Routes, Route} from 'react-router-dom'
function router(){
return (
<Routes>
<Route path="/" element={<Home name={"Home"}/>}/>
<Route path="/about/*" element={<About/>}/>
<Route path="/about/intro" element={<Content/>}/>
<Route path="/about/intro/:userId" element={<Content/>}/>
<Route path='profile/*' element={<Home name={"Profile"}/>}>
<Route path='special' element={<Content />} />
</Route>
<Route path='*' element={<Error/>}/>
</Routes>
)
}
위 코드를 보면 Routes와 Route가 있습니다.
Routes는 URL 주소의 바구니이고 Route는 URL 입니다.
이 부분이 저는 가장 중요하다고 생각하는데, 프로젝트의 전체적인 구조를 확인 할 수 있다 생각해서 입니다.
- 하나의 URL -
하나의 URL를 사용할 때는 <Route />에 path를 적어주고 element에 Component를 넣어주면 됩니다.
이때 중요한 것이 "하위 컴포넌트를 어떻게 사용할 것인가"에 대한 고찰이라고 생각합니다.
(초보자 React 개발하는것이지만,,,)
Route를 사용하면 하위 Component를 만들게 됩니다.
그리고 만약 중첩이라면 그 하위 Component에 또 Component를 생성하게 됩니다.
따라서 Component를 어떻게 사용할지에 대한 생각에 따라
Route를 중첩으로 할 건지 하나의 Route로 할 건지 생각해야합니다.
- 중첩 URL -
충첩 URL은 Path 밑에 또다른 Path를 주는 겁니다. 예를들어 name/chapchap 이런씩으로 말이죠
방법은 두가지가 있습니다.
아래 처럼 하나의 URL 처럼 원하는 URL을 적어주고 하위 링크를 두는 겁니다.
<Route path="/about/intro" element={<Content/>}/>
다른 하나는 Route 밑에 다시 Route를 만들어 주는 방법입니다.
<Route path='profile/*' element={<Home name={"Profile"}/>}>
<Route path='special' element={<Content />} />
</Route>
위의 차이는 컴포넌트를 어떤식으로 사용하냐에 따라 달라 질 것 같습니다.
** Router에서 A 태그 만들어 주기 **
import {Link, NavLink} from 'react-router-dom'
<div>
<nav>
<ul>
<li>
<NavLink to="/">Home</NavLink>
</li>
<li>
<Link to="/about"> About</Link>
</li>
<li>
<Link to="profile">Error</Link>
</li>
</ul>
</nav>
{router()}
</div>
- Link -
Link 는 A태그와 같습니다. to는 해당 링크로 이동하라는 의미 입니다.
"/" -> 메인페이지
"/about" -> about 페이지로 이동
"profile" -> profile 페이지로 이동
- NavLink -
Link와 NavLink는 css에 class="active"가 표시되나 안하냐의 차이 뿐 입니다.
** 중첩 Router 이동하기 **
- 하나의 URL -
function Aside(props){
return (
<div className="aside">
<ul>
<li>
<NavLink to="intro">intro</NavLink>
</li>
<li>
<NavLink to="intro/1">User ID</NavLink>
</li>
</ul>
</div>
)
}
function About() {
return (
<div className='Link'>
<Aside></Aside>
</div>
)
위에 처럼 Component 밑에 NavLink to를 하면 현재 URL에 intro를 더 추가하게 된다.
위의 방식 처럼 하면 About 하위로 Component를 생성하는게 아니라 Content로 대체하게 된다.
- 중첩 Route -
import { Outlet} from 'react-router-dom'
function Home(props) {
return (
<div className='Link'>
<p>{props.name}</p>
<Outlet />
</div>
)
}
위와 같은 방식은 Route 하위에 Component를 생성하는 방식이다.
이때는 <Outlet/> 을 통해 연결을 시켜주면 된다.
즉, profile 밑에 "special" 링크로 들어가게 된다.
** Navigate와 Location **
import {useNavigate ,useLocation } from 'react-router-dom'
function Error() {
let navigate = useNavigate();
const { pathname } = useLocation();
return (
<div className='Link'>
<div className='article'>
<p>This is Error Page - {pathname}</p>
<button onClick={function(){
navigate("/about/intro")
}}> go to About Page</button>
</div>
</div>
)
}
위와 같이 useNavigation을 사용하면 원하는 링크로 이동할 수 있게 해준다.
또한 현재 URL 주소를 알고 싶다면 useLocation을 통해 알수 있다.
** 파라미터값 가져오기 **
<Route path="/about/intro/:userId" element={<Content/>}/>
위 링크를 보면 about/intro/ 에 userId를 주게 되어 있다.
<NavLink to="intro/1">User ID</NavLink>
그리고 NavLink를 통해서 about/intro/1 을 줘서 이동하고 있다.
이때 useId에 1이 들어가게 되고 해당 값을 받고 싶다면
import {useParams } from 'react-router-dom'
function Content() {
const params = useParams()
useEffect(() => {
console.log('컴포넌트가 화면에 나타남');
return () => {
console.log('컴포넌트가 화면에서 사라짐');
};
}, []);
return (
<div className='Link'>
<p>{!params.hasOwnProperty('userId') ? "없음" : params.userId } : Content</p>
</div>
)
}
useParams를 통해서 값을 가져올 수 있게 된다.
** 참고 사이트 **
Router :
https://reactrouter.com/docs/en/v6/getting-started/overview
https://velog.io/@soryeongk/ReactRouterDomV6
React :
https://react.vlpt.us/basic/16-useEffect.html
https://www.pluralsight.com/guides/how-to-show-and-hide-reactjs-components
CSS :
https://studiomeal.com/archives/197
https://meaningone.tistory.com/318
기타 :
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
https://stackoverflow.com/questions/20804163/check-if-a-key-exists-inside-a-json-object
댓글