리액트를 왜 좋아하는가
활용하는 방법
어플리케이션 만드는 방법
API에서 데이터를 가져오는 방법
앱이 다이내믹 데이터를 출력하는 방법
리액트 앱을 배포하는 방법
node -v
npm -v
npm install npx -g
npx -v
git --version
create-react-app
npx create-react-app 폴더이름
npx create-react-app movie_app_2019
code movie_app_2019
cd movie_app_2019 // movie_app_2019 폴더 경로 안으로 접근 (변경)
npm start //실행
git init
브라우저 url 경로 복사 https://github.com/sunmi8873/movie_app_2019
git remote add origin https://github.com/sunmi8873/movie_app_2019
git add.
git commit -m "first React App"
git push origin master
git init
remote
branch checkout
git add ./
git commit -m '코멘트'
git push origin psm
리액트 공식문서
- const element =
Hello, world!
;- JSX : 자바스크립트의 문법 확장
- 왜 JSX인가?
- React는 렌더링 로직이 다른 UI 로직과 본질적으로 결합되어 있다는 사실, 이벤트 처리 방법, 시간에 따른 상태 변경 방법 및 데이터 표시 준비 방법을 포함
- JSX에 표현식 포함하기
- JSX에 표현식 포함하기
- JSX 또한 표현식이다
- JSX 속성 정의
- JSX 자식 정의
- JSX 인젝션 공격 예방
- JSX 객체 표현
/* Potato.js */
import React from "react";
function Potato() {
return <h3>I love potato</h3>;
}
export default Potato;
/* index.js */
import React from "react";
import ReactDOM from "react-dom;
import App from "./App";
ReactDOM.render(<App />, document.getElementByID("potato"));
리액트 공식문서
- component
컴포넌트를 사용하여 UI를 독립적이고 재사용 가능한 부분으로 분리하고 각 부분을 독립적으로 생각할 수 있습니다.- 함수형 컴포넌트
function Welcome(props) { return <h1>Hello, {props.name}</h1>; }
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
import React from "react";
import Potato from "./Potato";
function Food({ favourite }) {
return <h1>I like {favourite}</h1>;
}
function App() {
return (
<div>
<h1>Hello</h1>
<Potato />
<Food favourite="kimchi" />
<Food favourite="ramen" />
<Food favourite="samgiopsal" />
<Food favourite="chukumi" />
</div>
);
}
리액트 공식문서
- Props는 읽기전용
- 컴포넌트를 함수나 클래스 중 어떤 걸로 선언했 건, props를 수정할 수 없습니다.
- 모든 React 컴포넌트는 props와 관련한 동작을 할 때 순수 함수처럼 동작해야한다.
import React from "react";
function Food({ favourite }) {
return <h1>I like {favourite}</h1>;
function Food({ name, picture }) {
return (
<div>
<h2>I like {name}</h2>
<img src={picture} />
</div>
);
}
const foodILike = [
{
name: "Kimchi",
image:
"http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg"
},
{
name: "Samgyeopsal",
image:
"https://3.bp.blogspot.com/-hKwIBxIVcQw/WfsewX3fhJI/AAAAAAAAALk/yHxnxFXcfx4ZKSfHS_RQNKjw3bAC03AnACLcBGAs/s400/DSC07624.jpg"
},
{
name: "Bibimbap",
image:
"http://cdn-image.myrecipes.com/sites/default/files/styles/4_3_horizontal_-_1200x900/public/image/recipes/ck/12/03/bibimbop-ck-x.jpg?itok=RoXlp6Xb"
},
{
name: "Doncasu",
image:
"https://s3-media3.fl.yelpcdn.com/bphoto/7F9eTTQ_yxaWIRytAu5feA/ls.jpg"
},
{
name: "Kimbap",
image:
"http://cdn2.koreanbapsang.com/wp-content/uploads/2012/05/DSC_1238r-e1454170512295.jpg"
}
];
function App() {
return (
<div>
<h1>Hello</h1>
<Food favourite="kimchi" />
<Food favourite="ramen" />
<Food favourite="samgiopsal" />
<Food favourite="chukumi" />
{foodILike.map(dish => (
<Food name={dish.name} picture={dish.image} />
))}
</div>
);
}
import React from "react";
function Food({ name, picture }) {
return (
<div>
<h2>I like {name}</h2>
<img src={picture} />
</div>
);
}
const foodILike = [
{
id: 1,
name: "Kimchi",
image:
"http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg"
},
{
id: 2,
name: "Samgyeopsal",
image:
"https://3.bp.blogspot.com/-hKwIBxIVcQw/WfsewX3fhJI/AAAAAAAAALk/yHxnxFXcfx4ZKSfHS_RQNKjw3bAC03AnACLcBGAs/s400/DSC07624.jpg"
},
{
id: 3,
name: "Bibimbap",
image:
"http://cdn-image.myrecipes.com/sites/default/files/styles/4_3_horizontal_-_1200x900/public/image/recipes/ck/12/03/bibimbop-ck-x.jpg?itok=RoXlp6Xb"
},
{
id: 4,
name: "Doncasu",
image:
"https://s3-media3.fl.yelpcdn.com/bphoto/7F9eTTQ_yxaWIRytAu5feA/ls.jpg"
},
{
id: 5,
name: "Kimbap",
image:
"http://cdn2.koreanbapsang.com/wp-content/uploads/2012/05/DSC_1238r-e1454170512295.jpg"
}
];
function Food({ name, picture }) {
return (
<div>
<h2>I like {name}</h2>
<img src={picture} alt={name} />
</div>
);
}
function App() {
return (
<div>
{foodILike.map(dish => (
<Food name={dish.name} picture={dish.image} />
<Food key={dish.id} name={dish.name} picture={dish.image} />
))}
</div>
);
npm i prop-types
"version": "0.1.0",
"private": true,
"dependencies": {
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1"
import React from "react";
import PropTypes from "prop-types";
const foodILike = [
{
@@ -11,42 +12,58 @@ const foodILike = [
id: 2,
name: "Samgyeopsal",
image:
"https://3.bp.blogspot.com/-hKwIBxIVcQw/WfsewX3fhJI/AAAAAAAAALk/yHxnxFXcfx4ZKSfHS_RQNKjw3bAC03AnACLcBGAs/s400/DSC07624.jpg"
"https://3.bp.blogspot.com/-hKwIBxIVcQw/WfsewX3fhJI/AAAAAAAAALk/yHxnxFXcfx4ZKSfHS_RQNKjw3bAC03AnACLcBGAs/s400/DSC07624.jpg",
rating: 4.9
},
{
id: 3,
name: "Bibimbap",
image:
"http://cdn-image.myrecipes.com/sites/default/files/styles/4_3_horizontal_-_1200x900/public/image/recipes/ck/12/03/bibimbop-ck-x.jpg?itok=RoXlp6Xb"
"http://cdn-image.myrecipes.com/sites/default/files/styles/4_3_horizontal_-_1200x900/public/image/recipes/ck/12/03/bibimbop-ck-x.jpg?itok=RoXlp6Xb",
rating: 4.8
},
{
id: 4,
name: "Doncasu",
image:
"https://s3-media3.fl.yelpcdn.com/bphoto/7F9eTTQ_yxaWIRytAu5feA/ls.jpg"
"https://s3-media3.fl.yelpcdn.com/bphoto/7F9eTTQ_yxaWIRytAu5feA/ls.jpg",
rating: 5.5
},
{
id: 5,
name: "Kimbap",
image:
"http://cdn2.koreanbapsang.com/wp-content/uploads/2012/05/DSC_1238r-e1454170512295.jpg"
"http://cdn2.koreanbapsang.com/wp-content/uploads/2012/05/DSC_1238r-e1454170512295.jpg",
rating: 4.7
}
];
function Food({ name, picture }) {
function Food({ name, picture, rating }) {
return (
<div>
<h2>I like {name}</h2>
<h4>{rating}/5.0</h4>
<img src={picture} alt={name} />
</div>
);
}
Food.propTypes = {
name: PropTypes.string.isRequired,
picture: PropTypes.string.isRequired,
rating: PropTypes.number
};
function App() {
return (
<div>
{foodILike.map(dish => (
<Food key={dish.id} name={dish.name} picture={dish.image} />
<Food
key={dish.id}
name={dish.name}
picture={dish.image}
rating={dish.rating}
/>
))}
</div>
);