일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
Tags
- 안드로이드
- db
- Data Structure
- react
- Redux
- CS
- TypeScript
- frontend
- 동적 계획법
- 리트코드
- BFS
- VIM
- Algorithm
- 프로그래머스
- DP
- 알고리즘
- DFS
- Javascript
- vscode
- Database
- 다이나믹 프로그래밍
- 그레이들
- Graph
- Python
- git
- network
- java
- 백준
- LeetCode
- 자바
Archives
- Today
- Total
늘 겸손하게
React NavLink 본문
단일 페이지 애플리케이션(Single Page Application), 즉 SPA를 만들때 중요한 점은 페이지가 리로드되지 않고 변경이 필요한 부분만 변경되는것인데 HTML의 a href를 이용했을때 단점은 링크를 클릭했을때 웹 페이지가 새로 로딩되는것입니다. 이러한 점을 보완하기 위한 React 컴포넌트가 바로 Link 입니다.
예시
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
function App() {
return (
<div>
<h1>Hello React Router DOM</h1>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='/topics'>Topics</a></li>
<li><a href='/contact'>Contact</a></li>
</ul>
<Switch>
<Route exact path="/"><Home></Home></Route>
<Route path="/topics"><Topics></Topics></Route>
<Route path="/contact"><Contact></Contact></Route>
<Route path="/">Not Found</Route>
</Switch>
</div>
);
}
|
cs |
위 코드의 a href를 클릭하면 원하는 링크로 접속이 되지만 웹 페이지 전체가 새로고침이 되버립니다. 변경이 필요하지 않는 부분까지도 모두 새로고침하는 낭비를 초래합니다. a href 대신 Link 컴포넌트를 사용하면
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
function App() {
return (
<div>
<h1>Hello React Router DOM</h1>
<ul>
<li><Link to='/'>Home</Link></li>
<li><Link to='/topics'>Topics</Link></li>
<li><Link to='/contact'>Contact</Link></li>
</ul>
<Switch>
<Route exact path="/"><Home></Home></Route>
<Route path="/topics"><Topics></Topics></Route>
<Route path="/contact"><Contact></Contact></Route>
<Route path="/">Not Found</Route>
</Switch>
</div>
);
}
|
cs |
웹 페이지가 새로고침되지 않고 변경이 필요한 부분만 바뀝니다. HTML a 태그 대신 React Link를 사용하는 방식으로 변경이 필요하지 않은 부분까지 새로 로드하는 낭비를 막고 최적화를 기대할 수 있습니다.
NavLink
React Link 컴포넌트중의 하나로 사용법은 Link와 동일합니다. 다른 점은 NavLink는 클릭된 컴포넌트에 class="active"를 붙여줍니다.
붙어진 class="active"를 이용해 CSS를 적용하여 현재 어떤 링크를 클릭했는지 강조할 수 있습니다.
예시
- index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
function App() {
return (
<div>
<h1>Hello React Router DOM</h1>
<ul>
<li><NavLink exact to='/'>Home</NavLink></li>
<li><NavLink to='/topics'>Topics</NavLink></li>
<li><NavLink to='/contact'>Contact</NavLink></li>
</ul>
<Switch>
<Route exact path="/"><Home></Home></Route>
<Route path="/topics"><Topics></Topics></Route>
<Route path="/contact"><Contact></Contact></Route>
<Route path="/">Not Found</Route>
</Switch>
</div>
);
}
|
cs |
위 코드와 같이 NavLink를 사용하고
- index.css
1
2
3
4
|
.active {
background-color: tomato;
text-decoration: none;
}
|
cs |
CSS를 적용하면
클릭한 NavLink만 강조하는 효과를 넣을 수 있습니다.
'Programming > React' 카테고리의 다른 글
React 에러 - Uncaught Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes> (0) | 2022.07.06 |
---|---|
React JSX '&' 작성 (0) | 2022.06.30 |
React Router, BrowserRouter와 HashRouter 차이 (0) | 2022.06.30 |
create-react-app Render가 두 번될때 ( console.log 두번 출력될때 ) (0) | 2022.05.10 |
npx create-react-app (0) | 2022.05.10 |