4W_JS_React Route

시간이 진짜 왜이렇게 빨리가는지 모르겠다.

메서드 공부하다 갑자기 리액트로 돌아온 블로그..

그사이에 굉장히 많은 학습이 이루어졌지만, 어제 오늘 리액트 수업듣고 깨달았다.

 

"..아! 여기까지 온것은 다 리액트 배우려고 온거구나!! "

 

그래서 마음이 편해졌다. 뒤로 구르든 옆으로 구르든 어쨋든 프론트엔드의 꽃, 리액트만 잘해도 반은가겠구나..!

(물론 리액트 잘하려면 앞에 배운거 다잘해야함)

 

여하튼 어제의 기본문법에 이어 오늘은 라우터를 공부했고,

 

리액트 라우터의 주요 컴포넌트를 배운것 위주로 정리해보려한다.

 

먼저 라우터를 사용하기 전에 라우터 모듈이 들어있는 리액트 라우터 돔을 설치하여야한다.<작업 파일 열어서 터미널에>

npm install react-router-dom@5.3.0

우리는 버전 5.3.0을 사용했는데 최신버전 받은 동기 말로는 문법이 조금 달라지는거 같아서 다시 다운그레이드 하고왔다고한다.

(우리는 코드스테이츠 테스트 통과해야함 ㅋㅋ)

 

설치후 Package.Json 파일가면 원하는 버전으로 설치한것 확인가능함.

 

이제 리액트 라우터 돔에서 내가 사용할 모듈을 구조분해 할당해서 가져온다.( 별거아니고 {중괄호 안에 쓸거 적기^^})

돔안의 모든 모듈을 다 쓰지않기 때문에  필요한것 쏙쏙 가져오기

import {BrowserRouter, Route, Switch} from 'react-router-dom';

import뒤에는 (자바스크립트언어를 썻기때문에 중괄호에 넣어서) 사용모듈 적어주고 from 뒤에는 어디서 가져올건지

'이안에 '; 적어주면된다. 

import React from 'react';
import './App.css';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import Sidebar from './Sidebar';
import Tweets from './Pages/Tweets';
import MyPage from './Pages/MyPage';
import About from './Pages/About';

비슷한 예로 작업할 파일안에 끌고와야할 다른 파일들이 있다면

import 파일명 from './가져올곳'; 하면된다. (대소문자 유의하자^^ <-고생함)

 

자 이제 화려한 태그들이 경로 지정할것들을 감싸야함 

const App = () => {
  return (
    <BrowserRouter> 
      <div className="App">
        <main>
          <Sidebar />
          <section className="features">
            <Switch>  //이게 없으면 루트로 불러온 모든 컴포넌트가 연결되어 보여짐.
              <Route exact path = "/"> //path속성으로 경로를 지정해준다.
              	<Tweets/>  //불러올 컴포넌트를 연결해준다.
              </Route>
              <Route path = "/about">
              	<About/>
              </Route>
              <Route path = "/mypage">
              	<MyPage/>
              </Route>
            </Switch>
          </section>
        </main>
      </div>
    </BrowserRouter>  
  );
};

보면 맨윗줄 앱이라는 컨포넌트안에 <BrowserRouter></BrowserRouter> 로 싹다 감싸고

(컨포넌트안에 태그는 딱하나 밑에 다들어가야함. 둘이 될순없어~)

 

중간부분 <Switch></Switch> 안에 <Route></Route>

루트의 속성 path(루트태그 안에 적음 아까 import때 주소적은거처럼 주소와함께 ) 까지 한세트로!! 

 

루트안에<MyPage/> (불러오는 컴포넌트)까지 적어주면 다됫답.

***여기까지 진짜 대소문자 비상이였음***

 

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

const Sidebar = () => {
  return (
    <section className="sidebar">
        <Link to = "/"> <i className="far fa-comment-dots"></i> </Link>
        <Link to = "/about"><i className="far fa-question-circle"></i></Link>
        <Link to = "/mypage"><i className="far fa-user"></i></Link>
    </section>
  );
};

path를 통해 주소를 만들었기 때문에

여기서는 링크 모듈로 아이콘을 누르면 해당 페이지를 불러오는 방법을 봅시다.

 

일단, 링크쓸거니까 import로 링크가져오자.

보기와같이 두번째줄을 보면 이곳은 사이드바 컨포넌트이고 

사이드바안에 아이콘이 3개가 <i></i>있다는것을 알수있다.

 

아이콘 하나마다 링크로 감싸고 to = "" 써서 어디로 가고싶은지 정해주자

<Link to = "/about"><i className="아이콘주소?"></i></Link>

 

여기까지하면 나는 각각의 파일에 저장되어있는 컨포넌트를

app.js에서 경로를 지정하여 어떤 컨포넌트로 이동할것인지 정해주었고,

 

링크태그를 이용해 미리지정된 경로(주소)로 이동할수있는 장치를 만들었다.

 

마 리액트 별거아이네!(점심때쯤엔 울고싶었음..) 

 

역시 첨에 보면 하나도 모르겠는데 보다보니 조오금 알겠다. 자주보면 더 많이 알겠지!!

오늘 공부 정리 끗 ~~