2주프로젝트(WebPaper_day06 : 라우터 셋팅)

BrowserRouter

It uses history API, i.e. it's unavailable for legacy browsers (IE 9 and lower and contemporaries). Client-side React application is able to maintain clean routes like example.com/react/route but needs to be backed by web server. Usually this means that web server should be configured for single-page application, i.e. same index.html is served for /react/route path or any other route on server side. On client side, window.location.pathname is parsed by React router. React router renders a component that it was configured to render for /react/route.

Additionally, the setup may involve server-side rendering, index.html may contain rendered components or data that are specific to current route.

IE 9 이나 이하 버전 지원안됨
Client-side 리액트 앱은 주소를 클린하게 유지가능하나 웹서버가 뒤에 있을때 가능하다
웹서버는 SPA로 만들어져야 한다
예를 들어 react/route path를 위한 index.html 이나 다른 라우트들은 서버 side이고,
클라이언트 side에서는 window.location.pathname이 React router에의해 파싱된다

 

HashRouter

It uses URL hash, it puts no limitations on supported browsers or web server. Server-side routing is independent from client-side routing.

Backward-compatible single-page application can use it as example.com/#/react/route. The setup cannot be backed up by server-side rendering because it's / path that is served on server side, #/react/routeURL hash cannot be read from server side. On client side, window.location.hash is parsed by React router. React router renders a component that it was configured to render for /react/route, similarly to BrowserRouter.

Most importantly, HashRouter use cases aren't limited to SPA. A website may have legacy or search engine-friendly server-side routing, while React application may be a widget that maintains its state in URL like example.com/server/side/route#/react/route. Some page that contains React application is served on server side for /server/side/route, then on client side React router renders a component that it was configured to render for /react/route, similarly to previous scenario.

Read Component에서 차일드 컴포넌트로 데이터 전달

- Hooks 사용할 필요가 없나?

 

리액트 hooks의 중요성

- 클래스가 필요하지 않다

- this가 없다

- Best Practice를 강제한다

- High Signal-to-Noise Ratio(noise:불필요한코드 가 적다) 코드량 감소

- 코드 컴플리션/인텔리센스 

- Bloated component와 poor data structure

- 이해하기 쉽다

- 테스트하기 쉽다

- 성능의 증가

 

 

---

• https://stackoverflow.com/questions/51974369/hashrouter-vs-browserrouter
• https://medium.com/@minoo/react-stateless-functional-components-%EC%9A%B0%EB%A6%AC%EA%B0%80-%EA%B0%84%EA%B3%BC%ED%95%98%EA%B3%A0-%EC%9E%88%EB%8A%94-9%EA%B0%80%EC%A7%80-ecef2ef73d79
• https://boxfoxs.tistory.com/395