[React 공부노트 #1] react의 구조

react의 구조

public

public directory 내부의 index.html의 <div id="root"></div> 부분이 있다.
react는 저 id가 root인 div 내부에 내용을 바꿔가면서 보여주는데 이것을 가상DOM (virtual DOM) 이라고 한다

index.js

가장 상위의 react 파일
실제 랜더링 되는 components를 import해서 사용한다

App.js

이 파일에서 개발에 사용하는 component를 import해준다

이때 import되는 GlobalStyles, Header와 같이 상위개념의 component를 가져온다

민들어둔 헤더를 import 하면 router 밖에 있기 때문에 항상 노출이 된다

여러개의 리턴을 위하여 flagment를 쓴다

---

router.js

URL의 router가 바뀔떄다르게 보여줄 component를 정의해준다.
이 component로 인하여 URL이 바뀔떄마다 다른 페이지를 보여줄수 있게된다.

Header.js

index.js파일을 넣고 header 파일을 굳이 import시키는 이유는

App.js에서 import Header from 'Components/Header';와 같이 import해주고 싶기 때문이다.

import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset';
const globalStyle = createGlobalStyle`

`;

router

URL에 # 라고 나오는게 hash route를 쓰기 때문이다
<></>로 깜싼이유는 1개의 child만 return 할수 있어서다

Browser router

원래의 웹사이트 처럼 보여준다 : HTML history를 쓴다

Hash router

url이 이쁘진 않다.

웹이아닌 앱에 있다는 느낌을 준다

 

Composition은 두개 이상의 라우트로 랜더링 하는 방법이다

-> 예를 들어 TV안에 tab 들이 있을떄 (/tv/popular)쓸수있다.

 

이때 2개의 component가 전부 적합하기 때문에 둘다 랜더링이된다.

 

Redirect 는 아무곳도 아닐떄 /으로 리다이렉트 시킬려고한다.

 

하지만 같은 route로 render를 하려고 하면 에러가 나는데

이는, 위에서 한것처럼 composition error가 나기 때문이다.

 

이것을 해결해 주기위하여 Switch를 사용한다

switch는 1개의 ruote만 render되게 해준다.