React Router

• 이제 restful하게 페이지를 전환하고 싶기 때문에 React Router라는 것을 사용해보겠다.
• 스크린(패이지) 단위, 즉 Route 별로 생각하며 개발을 이어나가겠다는 말이다.
• 리스트에서 특정한 영화를 클릭하면 그 영화에 대한 정보만 있는 하나의 페이지로 이어지고 싶다.
  npm i react-router-dom@6.3.0
• 라우터 돔 버전은 계속 업그레이드 되기에 설치 전후로 버전 갱신에 대한 확인 필요.

• 페이지 라우팅을 위해 엄청난 변화가 생겼다.
• 우선 Movie 컴포넌트가 컴포넌트 폴더 안으로 들어갔다.
• 라우트를 위한 특별한 폴더가 생겼다.
• App 컴포넌트에 있던 내용을 Home 컴포넌트로 다 옮겼다.
• 그럼 이제 App은 무슨 역할을 할 것인가? router를 렌더링할 것이다.
• router는 URL을 보고 있는 component이다.
• 만약 localhost:3000/ 라면 Home 컴포넌트를 보여줄 것이다.
• 만약 localhost:3000/movies/123는 123에 대한 Detail 컴포넌트를 렌더링해서 보여줄 것이다.

import { 
	BrowserRouter as Router, 
    Switch, 
    Route, 
    Link 
} from "react-router-dom";

• 임포트 해야 한다.
• 저 컴포넌트를 그대로 갖다 쓰면 페이지 라우팅을 할 수 있게 된다.
• Switch 컴포넌트는 Route를 찾는 일을 하는데, Route는 URL 의미.
• 저 라우트를 찾으면 렌더링 한다.

• 슬래시 뒤에 아무것도 없는 기본 상태일 때는 Home 컴포넌트가 렌더링 되도록 하였다.

• 물론 Route는 여러 개 있을 수 있다.
• 아직 디테일하게 구현되지는 않았지만 디테일 컴포넌트를 연결해보았다.
• 이거 보니까 생각나는 거 없어? 스프링에서 @Controller가 경로에 해당하는 파일을 찾아 jsp나 thymeleaf 파일 열어서 렌더링 해주는 거!

Controller
public class HomeController {
    @GetMapping("/")
    public String home() {
        return "home";
    }
}

• 임포트한 BrowseRouter -> HashRouter로 바꿨더니 주소가 /#, /#/movie 같은 모습으로 바뀌었다.
• 그러므로 일단은 우리는 해시라우터가 아니라 브라우저라우터를 사용할 것이라는 것만 알고 넘어가자.

• 근데 여기서 이제 나는 하나의 라우트에서 다른 하나의 라우터로 넘어가는 방법도 알고 싶다.
• 유저가 홈 컴포넌트 화면에서 리스트 중 하나의 영화에 대한 제목을 클릭하면 그 영화에 대한 디테일만 담긴 디테일 컴포넌트로 넘어가는 것이다.
• 그런데 나는 그 때마다 모든 게 새롭게 재실행되는 상황이 싫다.
• 그것을 위한 컴포넌트의 이름은 Link.
• Link는 브라우저 새로고침 없이 유저를 다른 페이지로 이동시켜주는 컴포넌트다.

• a 태그 대신에 Link 컴포넌트를 이용해서 페이지 리프레시 없이 원하는 곳으로 이동하는 기능을 구현하였다.
• 이 정도의 작은 프로젝트에서는 티가 안 나지만, 앱이 커질수록 속도 차이에 대한 체감이 훨씬 커진다.

라우터돔 버전 업데이트

위의 코드는 5.3.0 버전에서 동작했지만 현재는 6.3.0 이후의 버전이 나오면서 원활하게 작동하지 않는다.

• Switch -> Routes
• path="/" element = {<Home />}

• 그래서 이렇게 코드를 변경해주었다.
• Swith는 더 이상 쓰이지 않는다.
• 그 대신에 Routes가 경로배정의 역할을 갈음한다.