ReactJS 영화 웹 서비스 만들기
ReactJS의 장점
- Components는 HTML을 반환하는 함수이다.
- 리액트의 가장 큰 장점은 빠르다. (react는 소스코드에 처음부터 HTML을 넣지 않고, HTML에서 HTML을 추가하거나 제거하는 법을 알고 있다.)
- 바로바로 반영된다.
- Virtual document object model (Virtual DOM)
- Jsx (Javascript + HTML) -> React에 특화된 개념
- 하나의 component만을 렌더링 해야한다.
- Props = properties
- React magic = 인자를 한 번에 다 받아온다.
(Object 안에 props라고 불리는 한 argument의 내부이다.)
import React from 'react';
function Food({fav}) {
return <h1>I like {fav}</h1>
}
function App() {
return (
<div>
<h1>Hello!!!</h1>
<Food fav="kimchi"/>
<Food fav="ramen"/>
<Food fav="samgiopsal"/>
<Food fav="chukumi"/>
</div>
);
}
export default App;
Map = 함수를 취해서 그 함수를 배열의 각 item에 적용해
한번은 dal에게 한번은 mark에게 한 번은 lynn에게 각 연산의 결과로 배열을 만들고 각 연산의 결과 값은 항상 0이다.
Ex)
friends.map(function(friend) {
return friend + "❤️";
})
(4) ["dal❤️", "mark❤️", "lynn❤️", "japan guy❤️"]
friends.map(function(current) {
console.log(current);
return 0
})
이모지 및 기호
control + cmd + space
npm I prop-types
state
매 순간 너가 set State를 호출할 때 마다 react는 새로운 state와 함께 render function을 호출할거야
Mounting = 태어나는 것
Updating = 업데이트
Unmounting = 컴포넌트가 죽는 것. (페이지가 바뀔 때)
npm I gh-pages
Vscode Control c = kill the server
npm run build
Navigation
Browser Router vs HashRouter
깃에는 해쉬라우터가 좋다고함.