리액트 (2) 썸네일형 리스트형 [React] react-router-dom의 유용한 Hooks! 알아두면 유용하게 사용할 수 있는 세가지 hook을 알아보자! useHistory - history 객체는 페이지 전체를 리로드하지 않고 주소를 임의로 변경하거나 되돌릴 때 사용한다. - 또한, 화면 전환과 함께 데이터를 전달할 수도 있다. 아래 코드에서 history.push("other", {movie})를 보면 path 주소를 other로 바꿔줌과 동시에 해당 컴포넌트에 movie 데이터를 전달하게 된다. 그렇게 되면 하위 컴포넌트에서 다시 movie에 대한 정보를 비동기적으로 요청하여 가져오지 않아도 된다. 보통, 구글링에 찾아보면 history.push({ pathname: "/other", state: { movie }}) 이런식으로 많이 사용하던데, 아래 그림과 같은 방법이 더 간단하다! -.. [React] react-router react-router 서버에 요청을 보내지 않고 클라이언트의 브라우저에서 여러 페이지들을 이동할 수 있는 클라이언트 사이드 라우팅을 도와주는 비공식 라이브러리이다. , , , 는 라우팅 관련 컴포넌트들의 최상단에 위치해야하는 컴포넌트이다. 는 들을 관리하며, 다수의 path 중 일치되는 첫 번째 라우트를 실행하기 때문에 path 충돌로 인한 오류를 방지해준다. 는 path값이 브라우저의 URL과 일치할 때 특정 컴포넌트를 렌더링 해준다. import React from 'react'; import {BrowserRouter as Router, Switch, Route} from 'react-router-dom' import {MovieHome, TvHome, OtherDetails} from './sc.. 이전 1 다음
