2020-01-16 리액트 2번째 수업 - React router와 라이프사이클

Component LifeCycle

리액트 컴포넌트는 탄생(Mount)부터 죽음(unmount)까지 여러 지점에서 개발자가 개발할 수 있도록 

class Component의 라이프사이클 메소드를 오버라이딩 할 수 있게 해준다.

 

그 메소드 중 render를 제외하고는 optional하다.

 

componentDidMount - 주로 서버와 통신하는 용도

 

React 16.3버전 이전

 

render되는 기준

props의 변경이 일어나거나(or 부모의 컴포넌트가 render되면) componentWillReceiveProps부터 시작

state가 변경되거나 shouldComponentUpdate 부터 시작

 

componentWillReceiveProps : 이안에서 setState를 할 수 있는데 props와 state 둘다 한번에 변경된다 각각 변경이 아니라

 

shouldComponentUpdate : return값이 true이면 render하고, false이면 render하지 않음, state나 props가 변경되면 호출

 

16.3버전 이후!

과정

constructor

getDerivedStateFromProps 

render

componentDidMount

 

getDerivedStateFromProps 

shouldComponentUpdate

render

getSnapshotBeforeUpdate

(dom에 적용)

componentDidUpdate

 

getDerivedStateFromProps : static메소드이다(class의 함수이다.) 

getSnapshotBeforeUpdate 쓰면 componentDidUpdate를 써야함.

 

componentDidCatch : 보통 최상위에 이 메소드를 작성함으로써 문제가 생겼을때 콜백하는 UI를 보여줘라 

 

 

React의 라우팅 이해하기

SPA의 라우팅 과정

1. 브라우저에 최초 "/" 경로로 요청하면

2. React Web App을 내려준다.

3. 내려받은 React App에서 "/" 경로에 맞는 컴포넌트를 보여준다.

4. React App에서 다른 페이지로 이동하는 동작을 수행하면,

5. 새로운 경로에 맞는 컴포넌트를 보여준다.

 

const App = () => (
  <BrowserRouter>
    <Route path='/' exact component={Home} />
    <Route path='/profile' component={Profile} />
    <Route path='/about' component={About} />
  </BrowserRouter>
);

Route 는 맞으면 보여주고, 안맞으면 안보여준다.

exact는 정확하게 일치해야 보여준다.

 

Dynamic라우팅

 

 

<Route path='/profile/:id' component={Profile} />

Profile 컴포넌트에서 이 id를 가져오는 방법은

props.match.params.id 로 접근하여 이 id를 가져올 수 있음.

 

/about?name=mark

mark를 뽑아 오는 방법! queryString 이라는 라이브러리를 이용하여 mark를 뽑아 올 수 있음.

const query = queryString.parse(props.location.search);

 

 

Switch 

여러 Route 중 순서대로 먼저 맞는 하나만 보여줍니다.

exact 없이 만들 수 있음.

page not found를 만들때 유용

 

 

JSX링크로 라우터 이동하기

<a> 태그와 <Link>태그의 차이점

<a>는 앱을 새로고침하면서 경로를 이동한다.(새창으로 외부링크 접속시에만 쓴다고 생각!!)

<Link>는 브라우저의 주소를 바꾸고, 맞는 Route로 화면을 변경한다.

 

NavLink

그냥 <Link>태그와는 다르게 active에 대한 스타일지정이 가능

<NavLink exact to="/" activeStyle={{ color: 'green' }}> 이런식으로 스타일링 가능

 

Redirect 이런식으로 사용

<Route
	path="/login"
	render={() => (isLogin ? <Redirect to="/" /> : <Login />)}
/>

 

----------------

하지만 hooks가 나오면서 거의 위에것들은 잘 쓰이지 않는 경우가 많다.

 

useHistory : history를 대체  기존의 withRouter를 대체한다.

useLocation : props로 받지 않고, 바로 location에 대해 접근해서 사용가능

useParams: match.params이런식으로 얻어왔던것을 대체할 수 있음. 

useRouteMatch(string | object) : 

  const match = useRouteMatch("/book/:id");
  const match = useRouteMatch({
    path: '/book/:id',
    strict: true,
    sensitive: true
  });

이런식으로 사용 가능 

 

 

예제 github

 

https://github.com/sunnykim91/react-frontendschool-byMarkLEE/tree/master/react-router-example

sunnykim91/react-frontendschool-byMarkLEE