React - 핵심모듈, a vs Link, NavLink

1. 리액트의 핵심 모듈 두가지

// 리액트 컴포넌트를 HTML Element에 연결
import ReactDOM from 'react-dom'

//리액트 컴포넌트 만들기
import React from 'react'

 

2. a 태그와 Link Router의 차이

a태그는 이동되면 이동되면서 서버로부터 파일들을 새로 다시 가져온다.
Link는 페이지가 이동되면서 서버로부터 파일을 안가져오고, 있는 파일중에 필요한 파일만 골라서 렌더링을 해준다.

 

3. NavLink

- 태그가 눌리면 active라는 클래스가 붙는다. 그래서 그 클래스에 스타일을 주면 내가 어떤 링크를 클릭했는지 알수 있다.

// App.jsx
import {NavLink} from 'react-router-dom'
import './App.css'

function App() {
  return (
    <>
    <NavLink to="/" > none </NavLink>
    <NavLink to="/home" > home </NavLink>
    <NavLink to="/detail" > detail </NavLink>
    <NavLink to="/idk"> idk </NavLink>
    </>
  );
}

export default App;


// App.css
.active{
    color: green;
}