라우팅하기, 부트스트랩 적용 (react router dom)

리액트는 싱글페이지 application 즉 하나의 페이지에서 구동하는 것을 기본으로 한다

그래서 a 태그를 못쓰기 때문에 라이브러리가 필요하다

그것이 바로 react router dom이다

우선 이것을 설치해줘야 한다

yarn을 사용하기때문에 나는 터미널을 켜서 우선 서버를 컨트롤+c로 꺼주고

yarn add react-router-dom 이라고 적어주면 알아서 설치가 된다

Done in 2.13s.

이렇게 나오면 설치가 된 것이다

친절하게도 설치시간은 총 2.13초가 소요되었다는 뜻이라고 알려준다

라우팅 초기세팅을 위해

App.js에 헤더와 푸터를 넣어주는데

<Header/>
<Footer/>

이렇게 넣어주고 나머지 파일에서는 전부
헤더와 푸터를 지워준다

굳이 다써줄 필요가 없다

자 이렇게 해주고 index.js로 넘어가서

<App/>

이 App.js를

<BrowserRouter>
<App />
</BrowserRouter>

이렇게 브라우저라우터로 감싸준다

그다음 App으로 가서 라우팅을 해준다

<div>
        <Header/>
        <Routes>
        <Route path={"/"} element={<HomePage/>} />
        <Route path={"/login"} element={<LoginPage/>} />
        </Routes>
        <Footer/>
    </div>

이렇게 작성해주는데 라우팅을 한다는 것은

Route를 먼저 적고 import해주고 path"/"을 적어서

기본 포트를 작성시 홈으로 가도록 해주는데

exact를 true로 해주고 컴포넌트는 HomePage로 적어주고 해당 js파일도 import해준다

추가로 우리에겐 로그인 페이지도 필요하기때문에

복사해서 아래에 똑같이 넣고 import해준다

  <div>
        <Header/>
        <Route path={"/"} exact={true} component={HomePage} />
        <Route path={"/login"} exact={true} component={LoginPage} />
        <Footer/>
    </div>

자 그렇다면 여기서 exact true는 왜 적어줘야할까?

/ 를 여기저기 쓰다보면 컴퓨터가 잘못읽을 수 있으므로

컴퓨터에게 정확하게 해당 주소를 잘 읽어라는 뜻으로 exact true를 써준다고 이해하면 된다

만약 exact를 쓰지않으면 /가 들어가는 모든 주소를 읽어버린다

만약 exact를 쓰기 싫다면

/Home 이렇게 적어줘도 된다

본인에게 편한 방식을 택하면 된다

라우터를 쓰면 페이지를 이동하는 것이 아니라 객체를 바꿔치기하는 것이다

같은 페이지에서 홈화면을 보여줬다가 로그인화면을 보여주는 바꿔치기해가면서

원하는 내용을 보여준다고 이해하면 쉽다

라우터가 업데이트되면서 경로설정하는것이 component가 아닌

element로 바뀌게 되었다

그래서 적어줄 때

<Route path={"/"} exact={true} element={<HomePage/>} />

이렇게 적어줘야한다 {}안에 <> 로 한번도 감고 / 로 마무리해줘야한다

싱글페이지에서는 a태그를 쓰면 안된다 그렇게되면

페이지 전체가 새로고침이 되어버리니까 link라는 것을 이용해서

해당 내용만 새로 불러오면 되는데 a태그를 쓰면 전체 페이지가 전체 새로고침되어서

link를 사용해줘야한다

Link를 써주고 import해주고

Header에서 메뉴를 클릭하면 홈과 로그인 페이지로 이동할 수 있도록 만들어보자

import React from 'react';
import styled from "styled-components";
import {Link} from "react-router-dom";


//하나의 컴포넌트를 생성(재사용)

//style-components => js파일과 css파일 관리!!
const StyledHeaderDiv = styled.div`
border: 1px solid black;
height: 300px;
background-color: ${(props)=> props.backgroundColor};
`

const Header = () => {
    return (
        <StyledHeaderDiv backgroundColor={"blue"}>
            <ul>
                <li>
                    <Link to={"/"}>홈</Link>
                </li>
                <li>
                    <Link to={"/login"}>로그인</Link>
                </li>
            </ul>
        </StyledHeaderDiv>
    );
};

export default Header;

이런식으로 작성해주면 버튼 클릭시 해당 페이지를 불러온다
새로고침이 아닌 바꿔치기 한다는 것으로 이해하면 된다

리액트 단점이 최초로딩이 엄청 오래걸린다
받아올 데이터가 엄청 많기 때문인데

캐싱안되어있으면 엄청 오래걸리는데

a태그를 쓰면 전체를 싹 다시 받아오기때문에
링크를 써줘야한다

데이터도 링크로 던질 수 있다

어떤페이지에서 다른페이지로 넘어갈 때 데이터를 던지고싶다면 어떻게하면 좋을까?

match.params라는 것을 이용하면 된다

로그인페이지로 갈 때 아이디값을 물고 가려면

  <Route path={"/login/:id"} exact={true} element={<LoginPage/>} />

이렇게 작성해주고

/login/123

이런식으로

뒤에 값을 넣어주면된다

그러면 그 해당하는 아이디에 맞는 페이지로 보내는 것이다

만약 로그인이라는 버튼을 눌렀을때 알아서 번호를 물고 가게 하려면

Header.js로 넘어가서 /login/10 이렇게 적어주면

<Link to={"/login/10"}>로그인</Link>

로그인 버튼을 누르면 자동으로 뒤에 10이 붙어서 url이 만들어진다

내가 공부하고 있는 자료에서는 props.match.params.id 이런식으로 쓰여졌는데
에러가 나서 구글에 검색해서 찾아낸 방법에는
console.log(useParams()); 이런식으로 적어주면

id:10 이라고 아름답게 답이 콘솔에 출력되었다!

자 이번에는 뒤로가기 버튼을 만들어서 history back을 해보려고 하는데

몇십분동안 history.back 자료를 보고 아무리 따라하고 이것저것 다 해봐도

작동하지 않아서 업데이트되었나? 하고 검색해보니 역시나 ^^

버전6부터 사라지고 navigate로 바꼈다고 한다

그래서 결구 삽질끝에 뒤로가기 버튼을 바로 전 페이지로 돌아가는 버튼 구현에 성공했다

코드는

import React from 'react';
import Login from "../components/login/Login";
import {useNavigate, useParams} from "react-router-dom";

const LoginPage = (props) => {
    console.log(useParams());

    const navigate = useNavigate();


    return (
        <div>
            <button onClick={()=> navigate(-1)}>뒤로가기</button>
            <Login/>
        </div>
    );
};

export default LoginPage;

이렇게 작성해주고 눌러주면 바로 직전 페이지로 이동하는 뒤로가기 버튼을 실행 할 수 있다

자 이번에는 push였지만 업데이트되면서 이제는 경로만 넣으면 되는 코드를 작성해보자

<button onClick={()=> navigate("/")}>뒤로가기</button>

이렇게 작성해주면 잘 작동하는 것을 볼 수 있다

-1 -2 -3 이런식으로 뒤로 몇번이나 넘어갈지 정할 수 있고

그냥 url을 적어주면 원하는 곳을 딱 지정해서 이동 할 수도 있다

정리하자면

a는 안되고 link

내가 가고자하는 곳은 navigate(-원하는숫자만큼뒤로 -1 -2 -3 등등 )

지정된 페이지로 이동하고 싶으면 () 안에 "/페이지 Url" 이렇게 넣어주면된다

링크 디자인을 하고 싶으면

똑같이 지난번 처럼 () 안에 Link를 넣어주고

해당 이름을 링크대신해서 스타일링 해줄 수 있다

import React from 'react';
import styled from "styled-components";
import {Link} from "react-router-dom";


//하나의 컴포넌트를 생성(재사용)

//style-components => js파일과 css파일 관리!!
const StyledHeaderDiv = styled.div`
border: 1px solid black;
height: 300px;
background-color: ${(props)=> props.backgroundColor};
`


const StyledHeadLink = styled(Link)`
        color: red;
    `;

const Header = () => {
    return (
        <StyledHeaderDiv backgroundColor={"blue"}>
            <ul>
                <li>
                    <StyledHeadLink to={"/"}>홈</StyledHeadLink>
                </li>
                <li>
                    <StyledHeadLink to={"/login/10"}>로그인</StyledHeadLink>
                </li>
            </ul>
        </StyledHeaderDiv>
    );
};

export default Header;

이런식으로 컬러 레드를 준 스타일링크에 Link를 import한 다음

링크 대신해서 해당 변수명 StyledHeadLink를 넣어주면 된다

이런식으로 해당 링크 스타일링이 잘 적용된 것을 볼 수 있다

이게바로 스타일 상속 Style extend 라고 할 수 있다

스타일 변경을 위해 우리가 자주 사용하는 부트스트랩을 사용할 수 있는데

npm install react-bootstrap bootstrap이 기본인데

나는 yarn 을 사용함으로 yarn add react-bootstrap bootstrap으로 설치해주고

import해서 사용해주면 된다

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
  integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
  crossorigin="anonymous"
/>

추가적으로 해당 코드를 index.html 타이틀 바로 위에 붙여넣어줘도 되는데

아무래도 index.html은 안건드리는게 좋을 것 같다

차라리 더 안전하게 index.js안에

import 'bootstrap/dist/css/bootstrap.min.css';

이렇게 코드를 넣어주자

넣고 안넣고 큰차이는 없지만 아직 자세히 모르니 넣어주는게 좋을 것 같다

부트스트랩 홈페이지에 들어가서

컴포넌트를 눌러주고 navbar를 눌러주고

• 혹시 나중에 찾으려면 해당 링크 클릭! *
  https://react-bootstrap.github.io/components/navbar/

여러가지 예시중에

 <>
      <Navbar bg="dark" variant="dark">
        <Container>
          <Navbar.Brand href="#home">Navbar</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#features">Features</Nav.Link>
            <Nav.Link href="#pricing">Pricing</Nav.Link>
          </Nav>
        </Container>
      </Navbar>
      <br />
      <Navbar bg="primary" variant="dark">
        <Container>
          <Navbar.Brand href="#home">Navbar</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#features">Features</Nav.Link>
            <Nav.Link href="#pricing">Pricing</Nav.Link>
          </Nav>
        </Container>
      </Navbar>

      <br />
      <Navbar bg="light" variant="light">
        <Container>
          <Navbar.Brand href="#home">Navbar</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#features">Features</Nav.Link>
            <Nav.Link href="#pricing">Pricing</Nav.Link>
          </Nav>
        </Container>
      </Navbar>
    </>

이렇게 넣어주는데 보다시피 잘 적용은 되지만 클릭하면
a링크처럼 화면이 깜빡거리면서 새로고침되는 상황이 생긴다

우리는 새로고침이 되면 안되기 때문에

해당 버튼을 조금 손봐줄 필요가 있다

 <Link to={"/"} className={"nav-link"}>홈</Link>
 <Nav.Link href="/">Home</Nav.Link>

아래가 기본 부트스트랩에서 제공하는 코드인데

위처럼 Link to 를 이용해서 넣어주고 className으로 nav-link를 넣어주면

새로고침되지않고 바꿔치기로 화면을 띄어준다

한가지 더 예를 들어보자

만약

  <Navbar.Brand href="#home">Navbar</Navbar.Brand>

이런 코드가 제공된 기본 부트스트랩 코드라고 했을 때

이 코드를 link형태로 사용하고자 한다면 ?

<Link to={"/"} className={"navbar-brand"}>홈</Link>

이렇게 작성해주면 된다

자 정리하자면 블라블라.블라블라 인 부트스트랩 기본 코드를 사용하려면

. 대신해서 - 로 바꿔서 className에 넣어주면 된다

앞으로 부트스트랩을 이용할 경우 이렇게 적용해주면 된다