2주-Project(2)

※개인 학습 공간입니다.※

※참고 블로그, 자료 - velopert님의 react-router 1장
https://velopert.com/3417

react-router :: 1장. 리액트 라우터 사용해보기 | VELOPERT.LOG

 

리액트 라우터 활용

먼저 SPA ?

• single page application
  페이지가 1개인 어플리케이션
  자세한 개념 및 설명은 추후에...
• 라우팅 ??
  주소에 따라 다른 view를 보여주는 것

★ 라우터를 사용 할 때 디렉토리 구조가 중요한 것 같다.

src/components: 컴포넌트들이 위치하는 디렉토리입니다.
src/pages: 각 라우트들이 위치하는 디렉토리 입니다.
src/client: 브라우저 측에서 사용할 최상위 컴포넌트 입니다. 
            우리가 추후 서버사이드 렌더링을 구현 할 것이기 때문에 디렉토리를 따로 구분하였습니다. 
           (서버사이드 렌더링을 할 때에는 서버 전용 라우터를 써야합니다.) 여기서 라우터를 설정합니다.
src/server: 서버측에서 사용 할 리액트 관련 코드를 여기에 넣습니다.
src/shared: 서버와 클라이언트에서 공용으로 사용되는 컴포넌트 App.js 가 여기에 위치합니다.
src/lib: 나중에 웹 연동을 구현 할 때 사용 할 API와 코드스플리팅 할 때 
         필요한 코드가 여기에 위치합니다.

※ 해시 라우터? (알아보기)

 

라우터 활용에 있어서 겪었던 문제점들

1. 라우팅 path 설정에 있어 형식이 존재하는 것 같다.
   path 경로를 파일 import 경로 그대로 따왔더니 오류가 남.
   한참을 헤메다가 path 경로를 네이밍 하듯 /name 해줬더니 라우팅 됨.
   
   
2.  페이지가 바뀌는( 리랜더링 ) 되는 건 아닌 듯 하다.
   컴포넌트의 형태로 랜더링 되는 듯 함.
   최종 랜더링 될 App.js 에 여러 컴포넌트가 있고, 그 중 하나의 컴포넌트 파일에서
   라우팅을 할 경우 해당 컴포넌트만 라우팅 되고 나머지 컴포넌트는
   화면에 그대로 같이 랜더링 됨.
   
   해결법을 생각해 보자면...?
   → 최종 랜더링 되는 App.js에 하나의 컴포넌트만 랜더링 하기
   → state를 이용하기?? (구체적이지 않음)
   
   
3. 라우팅에 필요한 모듈들(사용해본 것들만)...
   Link, Router, Route, Switch