react study

react에 대해서 깊이있게

금일 알아간 것

• 리액트 라우터 다중페이지 구축

1. 리액트 라우터 설치하기

npm install react-router-dom@5

현재 리액트 라우터는 버전 6까지 나와있으나 , 버전 5를 우선 사용

2. 경로 정의 및 사용하기

리액트 라우터를 사용한다는 것은 다른 페이지(컴포넌트)를 로드하는 것을 말한다

• Route사용

import {Route} from "react-route-dom"

• pages 라는 폴더안에 Welcome.js를 만들고 이를 App.js에 import

import Welcome from "./pages/Welcome";

• App.js 코드

function App(){
	return(
    	<div>
        	<Route path = "/welcome">
            	<Welcome/>
            </Route>
        </div>
   );
}

• 그 후 index.js에서 rendering

import ReactDom from "react-dom/client";
import {BrowserRouter} from "react-router-dom";

import "./index.css"
import App from "./App"

const root = ReactDom.createRoot(document.getElementById("root"));
root.render(
	<BrowserRouter>
    	<App/>
    <BrowserRouter/>	

이렇게 함으로써 직접 url주소를 해당에 맞게 입력하면
그 페이지가 나오는 것을 확인할 수 있다.

하지만 , 우린 자동적으로 클릭했을때 렌더링 되는 것을
원하지 않는가
그 파트를 해보도록 하겠다

3. 링크 작업하기

• components 폴더 생성
• MainHeader.js를 components폴더안에 생성

import {Link} from "react-router-dom";


const MainHeader = () =>{
	return(
    	<header>
        	<nav>
             <ul>
              <li>
               <Link to ="/welcome> welcome </Link>
              </li>
             </ul>
            </nav>
         </header>
    )
    
};

export default MainHeader;

react 에서는 Link를 이용해서 링크로 이동을 한다
a태그를 사용해도 되지만 , 이는 요청이 새로 보내지게 되어서
매끄럽지 못한 부분이 있다
즉 , 화면전환에서 더 좋다

• 다시 App.js

import MainHeader from "./components/MainHeader";

function App(){
	return(
    	
    	<div>
        	<MainHeader/>
            <Main>
              <Route path = "/welcome">
                  <Welcome/>
              </Route>
            </Main>
        </div>
   );
}

여기서 main, header 와 같은 것이 중요하다고 생각한다

위 파트를 인지 하면 좋을 것 같다

• NavLink 사용하기

  현재 페이지는 링크를 클릭했을때 어떤 링크를 클릭했는지에 대해
  알 수 없다. 그래서 우린 NavLink를 사용해준다

import {NavLink} from "react-router-dom"
import classes from "../styles/MainHeader.module.css";


const MainHeader = () =>{
	return(
    	<header>
        	<nav>
             <ul>
              <li>
               <NavLink activeClassName={classes.active} to ="/welcome> welcome </NavLink>
              </li>
             </ul>
            </nav>
         </header>
    )
    
};
                                                              

여기서 ,
1. activeClasseName
-> Prop으로 classes.active라는 것을 넣어준다
이는 a.active에 의해 클릭을 할때 css에 맞는 동작을 한다. 여기서는 클릭한 것의 글씨의 색깔이 변경이 된다.
위 a.active말고도

● a:visited : 방문한 링크
● a:hover : 링크에 마우스 포인터를 올려 놓았을 때
● a:active : 링크를 마우스로 클릭한 순간
● a:link : 방문하기전의 링크
와 같은 것들이 있다.