React&ES6에서 카운터 앱을 만들어 보았습니다.
도트 설치 React 입문
만드는 것
상품 재고 수를 계산할 수 있는 카운터 앱
카운터를 클릭하면 과일의 개수가 늘어납니다.
초기 설정
먼저, Chrome 확장 프로그램인 React Developer Tools를 소개합니다. 검색하면 나옵니다.
또 이번은, 로컬 파일로 개발하므로, 「확장 기능을 관리」 → 「파일에의 액세스를 허가한다」를 ON으로 해 주세요.
그러면 위 이미지처럼 빨간색 멋지게 표시가 나옵니다.
코드
코드 설명은 주석으로 작성되었습니다.
head의 script 부분은 React의 공식 사이트 개발용 스크립트를 복사합니다.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>React Practice</title>
<link rel="stylesheet" href="MyreactApp/css/styles.css">
<!-- Reactの本体 -->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- Reactの結果をブラウザのDOMに反映させていくためのライブラリ -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- JSXやES6の文法を使うためのBabelというライブラリ -->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<!-- Reactを使ったUIを表示する領域を作る -->
<div id="root"></div>
<script type="text/babel">
//即時関数で囲いたい→JSXの記法であるアロー関数式
(() => {
// Props(propaties)がここに渡される
function Counter(props){
return(
<li style={{backgroundColor:props.counter.color}} onClick={() =>
props.countUp(props.counter)}>
{props.counter.id}-{props.counter.count}
</li>
);
}
// propsが渡ってくる
function CounterList(props){
// 渡ってきたpropsのcountersをmapで処理
const counters=props.counters.map(counter => {
return(
<Counter
//{}でJavaScriptの式を書ける←JSXの記法
counter= {counter}
// ループ処理するために値を付ける
key={counter.id}
countUp={props.countUp}
/>
);
});
return(
<ul>
{counters}
</ul>
);
}
// Counterの情報をこのstateで管理 stateを変更できるのはここだけ
class App extends React.Component{
constructor(){
super();
this.state = {
counters: [
{id: 'Melon', count: 0, color: 'limegreen'},
{id: 'Grape', count: 0, color: 'purple'},
{id: 'Apple', count: 0, color: 'red'},
{id: 'Orange', count: 0, color: 'orange'},
{id: 'Coconut', count: 0, color: 'white'},
{id: 'Lemon', count: 0, color: 'yellow'}
],
total: 0
};
this.countUp=this.countUp.bind(this);
}
countUp(counter){
this.setState(prevState => {
const counters=prevState.counters.map(counter => {
return{id: counter.id, count: counter.count, color: counter.color};
});
const pos=counters.map(counter => {
return counter.id;
}).indexOf(counter.id);
counters[pos].count++;
return{
counters: counters,
total: prevState.total + 1
};
});
}
render(){
return(
// HTMLで言うclassはclassNameで書く
<div className="container">
<CounterList
// ここにカウンターのデータが渡ってくる
counters={this.state.counters}
countUp={this.countUp}
/>
<div>TOTAL INVENTORY: {this.state.total}</div>
</div>
);
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')
);
})();
</script>
</body>
</html>
React의 작동 방식
여기서 구조를 조금 해설합니다.
React에서 중요한 것은,
입니다.
state는 UI를 다시 쓰는 데 필요한 Component 변수를 관리합니다.
그리고 props는 Component 사이의 변수를 전달합니다.
React에서는 Component 단위로 미세하게 변수를 관리함으로써 기능을 확장하거나 재사용하고, 간단하게 하고 있습니다.
넘어진 일
어느 때, 에러가 나오고, Developer Tools(Ctrl+Shift+i로 표시)로 확인하면, 「〇행째가 잘못되어-」라고 나왔습니다.
그 줄의 코드와 30분 이상에 망설이고 있었지만 전혀 모르겠다.
원인은
, 를 붙이지 않는 것이었습니다.
Reference
이 문제에 관하여(React&ES6에서 카운터 앱을 만들어 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kaiware7/items/af70ad91eed18904bd81텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
