Final Project 대비 키워드정리(react-router-dom)

what is 라우팅(Routing)?

• 사용자가 어떤 주소(URL)로 들어갔을때, 그 주소에 해당하는 페이지를 사용자에게 보내주는 것
  (라우팅 한번 기똥차게 만들어 보자..!)

• 그러면 리액트라우터돔은 뭘까!?
  (페이스북에서 직접 만든건 아니다).
  그것은 리액트의 라이브러리중의 하나로서
  꼭 사용해야 하는 것은 아니며, 다른 라이브러리를 사용할수도 있다
  심지어 직접 구현할수도 있지만
  거의 공식이라 싶을정도로 많이 사용된다.

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

• react-router-dom 을 적용시키고 싶은 최상위 컴포넌트에 감싸주는 wrapper component이다.

ReactDom.render(<BrowserRouter> 
                    <App/>
                </BrowserRouter>, 
                document.getElementById('root'))

import {Route} from 'react-router-dom'

 <Route exact path="/" component={Login} />
 <Route path="/Home" component={Home} />
//첫번째 Route안에 exact가 없다면 /를포함하고있는 /+Home< 또한 출력되게됨

import {Switch} from 'react-router-dom'

1방법
<Switch>
 <Route exact path="/"><Login></Login><Route>
 <Route path="/Home"><Home></Home><Route>
 <Route path="/">Not Found<Route>
<Switch>
2방법
<Switch>
 <Route exact path="/" component={Login}/>
 <Route path="/Home"   component={Home} />
 <Route compoenent={NotFound}/>
<Switch>
    //그동안 스위치가 뭔가 했더니 
   //내가 이해한게 맞다면 자바스크립트의 else문 같은거였다.
   //앞에서 일치하지않는다면 가장 마지막의 Route를 보여주는

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

<Link to="/"> ** </Link>
//페이지 새로고침 하지않고 라우팅전환해주는 역할

import {NavLink} from 'react-router-dom'

<NavLink to="/" className="normal" activeClassName="active"> ** </NavLink>
//NavLink를 통해 라우팅이 변경되면 className="beforeActive"에서  
//activeClassName="active"로 변경되면서 라우팅된것과 아닌것들의 차별점을 둘수있다.
//예를들어 라우팅이벤트를 갖고있는 버튼을 클릭하면 해당 버튼의 디자인이나 텍스트의 디자인변경

redirect vs history.push

이건 아직 헷갈리는 내용이라
보통 redirect는 인증과 관련해서 쓰이는정도로 알고 있고,
history.push 의 경우 함수안에서 사용할경우로 알고 있다.

+ React Hooks 도 공부시작해야겠다.