#1.0 Start with react (리액트 초기화)
1. 프론트엔드 라이브러리의 사용 이유
유저와의 인터렉션이 증가. 이걸 HTML과 순수 JS로 관리한다고 생각해봐.
매번 select하고 다시 onclick등 이벤트 리스너 넣고.!
댓츠 노노
2. 리액트 프로젝트 시작해보자!
리액트는 컴포넌트를 여러 파일로 나누어서 관리한다. 이 컴포넌트는 JSX라는 문법으로 작성.
여러개의 파일을 하나로 결합하기 위해 우리는 webpack을 사용.
또, JSX나 ES6등 인간에게 친화된 JS를 쓰기 위해 Babel을 사용한다.
(바벨이 브라우저가 알아듣도록 구린 JS로 바꿔준다.)
3. create-react-app
바벨 설치, 웹팩 설정은 매우매우 화가 나는 작업이다.
다행히 create-react-app이 이를 자동으로 해준다.
npm i create-react-app
#2.0 Setting Up the Project
리액트 처음 초기화 할때마다 까먹는 나라는 아이...하하하
npm i npx -g
npx는 create-react-app의 사용이 끝나면 우리 컴퓨터에서 삭제 되게 해준다!
npx create-react-app netflix_clone
---
App.js 와 index.js 빼고 다 지우기.
----
.env에 NODE_PATH=src 넣기
---
npm add prop-types
--
npm start
#2.1-2.2 React Router
home에서 시작할거라고 알려주자 - react router
npm add react-router-dom
exact: 해당 라우터야만 한다고 알려줌.
리액트에서는 두가지 컴포넌트 리턴할 수 없다. 하나만 가능!
-----
Class App과 function App의 차이?
----
Browser Router vs Hash Router
Browser Router : HTML history API - 웹처럼 보이게 해준다
Hash Router : Hash를 사용. - 앱처럼 보이게 해준다.
<Route path="/search" component={Search}/>
<Route path="/tv/popular" render={()=><h1>Popular</h1>} />
이렇게 적으면 둘다 렌더링 된다.
---
<Redirect from="*" to="/"/>
url이 일치하지 않을 경우 redirect.
----
Switch : 한 번에 하나의 라우트만 렌더링 하세요.
<Switch>
<Route path="/" exact component={Home} />
<Route path="/tv" exact component={TV} />
</Switch>