일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 프론트엔드
- 깃
- 웹디자인기능사실기
- 렛츠기릿자바스크립트
- JavaScript
- web
- github
- 연산자
- PROJECT
- 웹디실기
- 세로메뉴바
- 실기
- 웹퍼블리셔
- 생활코딩
- 코딩독학
- git
- 비전공자
- 코드공유
- 자바스크립트
- 타입스크립트
- 슬라이드전환
- Supabase
- CSS
- jQuery
- 정보처리기사
- JS
- 리액트
- react
- HTML
- 웹디자인기능사
- Today
- Total
목록React Router (2)
코딩하는라민

[React] React-Router 컴포넌트 VS 컴포넌트 리액트 프로젝트에서 페이지의 이동을 하기 위해서 리액트 라우터를 이용한다. 리액트 라우터이서 Link 컴포넌트를 통해 페이지를 이동할 수 있었는데, v4 업데이트 이후에 등장한 Link 컴포넌트의 업그레이드 버전인 NavLink 컴포넌트가 등장했다. 기능이 추가되었지만 성능 상에는 큰 차이가 없기 때문에 다양한 측면에서 NavLink 를 사용하는 것이 효율적이다. 우선 Link 컴포넌트는 무엇이며 어떻게 사용하는지 간단히 알아보고, NavLink 의 추가적인 기능에 대해 알아보자. 컴포넌트 a 태그와 차이점 Link 컴포넌트는 a 태그와 기능이 유사하다. 하지만 다른점이 있는데 페이지 전환을 방지한다는 것이다. 브라우저의 주소를 바꿀 뿐이지 페..

[React] React router 와 React router dom 에 대해 📌 React router 와 React router dom ? 리액트 팀 프로젝트를 하고있을 때였다. 리액트 라우터로 SPA(Single Page Application) 를 구현했다. 그러던 중 package.json 에 아래의 사진처럼 react-router 와 react-router-dom 이 두 가지가 설치되어 있는 것을 발견했다. 왜 두가지나 있는거지? 하고 구글링을 했다. 요약하면, React Router는 라우팅을 처리하는 핵심 라이브러리이고, React Router DOM은 React Router를 웹에서 사용하기 쉽도록 확장한 라이브러리이다. 즉 React Router DOM 은 React Router 을 포..