test

1week/class/src/App.js

@@ -4,68 +4,52 @@ import React, { Component } from "react";
 import logo from "./logo.svg";
 import "./App.css";
 //css를 불러옴 파일 이름은 달라도 된다.
-import Counter from "./Counter.js"; // 카운터를 표시해줄 컴포넌트 호출
+import Counter from "./Counter";
+import Clock from "./Clock";
 
+//1week homework
 //Component라는 react의 class를 상속 받음
 class App extends Component {
-  //constructor는 컴포넌트가 마운트(생성)될때 데이터를 초기화 시켜 주고 싶을때 사용한다.
-  //react에서는 state를 contructor에서 선언 해주어야 한다.
-  constructor(props) {
-    super(props);
-    //상속을 받을때 this를 사용하기 위해서는 super를 선언해준다.
-    //super를 사용하면 부모 클래스의 constructor를 호출해서 데이터를 초기화 해준다.
-
-    //number의 값을 state로 선언한다.
-    //state는 상태를 저장하는 변수로 현재 컴포넌트에서 데이터를 관리하거나 ui부분의 상태를 관리할때 사용
-    this.state = {
-      number: 0
-    };
-  }
-
-  //함수 실행시 number값이 1 증가
-  handleIncrease = () => {
-    const { number } = this.state;
-
-    //this.setState는 state의 값을 변경할때 사용 하는 함수
-    //this.state.number 에 직접 데이터를 변경할 수 없다.
+  state = {
+    pnum: 0
+  };
+  handlePInc = () => {
     this.setState({
-      number: number + 1
+      pnum: this.state.pnum + 1
     });
   };
-
-  //함수 실행 시 number값이 1감소
-  handleDecrease = () => {
-    this.setState(({ number }) => ({
-      number: number - 1
-    }));
+  handlePDnc = () => {
+    this.setState({
+      pnum: this.state.pnum - 1
+    });
+  };
+  handlePReset = () => {
+    this.setState({
+      pnum: 0
+    });
   };
 
-  //jsx를 화면에 보여줄때 render함수를 호출해서 return을 해야 한다.
-  //jsx는 js를 html처럼 사용할수 있게 해주는 언어?이다.
   render() {
     return (
-      //jsx를 return 할때 두개 이상의 엘리먼트가 있으면
-      //항상 감싸주어야 한다. 아래에서는 div로 엘리먼트를 감싸줌.
       <div className="App">
         <header className="App-header">
           <img src={logo} className="App-logo" alt="logo" />
-          {/*
-          위에서 import 한 Counter 컴포넌트를 선언 props를 이용해서 
-          handleIncrease와 handleDecrease함수와 number의 값을 전달 한다.
-          props는 상위컴포넌트에서 하위컴포넌트로 데이터와 함수를 전달할때 사용 하는 속성으로 
-          props로 데이터를 받은 컴포넌트에서는 데이터 변경이 불가 하다.
-        */}
+          <h1 className="App-title">Welcome to React</h1>
           <Counter
-            handleIncrease={this.handleIncrease}
-            handleDecrease={this.handleDecrease}
-            number={this.state.number}
+            pInc={this.handlePInc}
+            pDnc={this.handlePDnc}
+            pReset={this.handlePReset}
+            number={this.state.pnum}
           />
+          <Clock />
         </header>
+        <p className="App-intro">
+          To get started, edit <code>src/App.js</code> and save to reload.
+        </p>
       </div>
     );
   }
 }
-
 //외부에서 import로 불러오기 위해서는 export를 해줘야 한다.
 //default는 하나의 모듈 혹은 class만 export할때 써준다.
 //https://enyobook.wordpress.com/2016/08/17/export-default%EC%97%90-%EB%8C%80%ED%95%B4/

1week/class/src/Clock.js

@@ -0,0 +1,41 @@
+import React, { Component } from "react";
+
+class Clock extends Component {
+  state = {
+    date: new Date()
+  };
+
+  //CB 호출 순서를 파악하자.
+  handleIncrease() {
+    this.intervalId = setInterval(() => {
+      this.setState({ date: new Date() });
+    }, 1000);
+  }
+  handleDecrease() {
+    this.intervalId = clearInterval(() => {
+      this.setState({ date: Date() });
+    });
+  }
+
+  componentDidUpdate() {
+    console.log("update");
+  }
+
+  render() {
+    console.log("render");
+    return (
+      <div>
+        <h1>Clock</h1>
+        <p>{this.state.date.toLocaleTimeString()}</p>
+        <p>
+          <button onClick={this.handleIncrease}>Start</button>
+        </p>
+        <p>
+          <button onClick={this.handleDecrease}>Stop</button>
+        </p>
+      </div>
+    );
+  }
+}
+
+export default Clock;

1week/class/src/Counter.js

@@ -1,17 +1,44 @@
 import React, { Component } from "react";
-//react를 사용하기 위해서 react 라이브러리에서 React와 Component를 호출함
 
-//Counter 컴포넌트를 생성 하고 Component를 상속
 class Counter extends Component {
-  //jsx를 화면에 그려주는 함수
+  state = {
+    num: 0
+  };
+
+  //this, binding
+  handleInc = () => {
+    this.setState({
+      num: this.state.num + 2
+    });
+  };
+  handleDnc = () => {
+    this.setState({
+      num: this.state.num - 2
+    });
+  };
+  handleReset = () => {
+    this.setState({
+      num: 0
+    });
+  };
+
   render() {
     return (
-      //두개 이상의 엘리먼트를 return 할때는 반드시 div로 감싸야 한다.
       <div>
         <h1>Counter</h1>
-        <div>값: {this.props.number}</div>
-        <button onClick={this.props.handleIncrease}>+</button>
-        <button onClick={this.props.handleDecrease}>-</button>
+        <p>값 : {this.props.number}</p>
+        <p>
+          <button onClick={this.props.pInc}>+</button>
+          <button onClick={this.props.pDnc}>-</button>
+          <button onClick={this.props.pReset}>Reset</button>
+        </p>
+        <h1>Counter</h1>
+        <p>값 : {this.state.num}</p>
+        <p>
+          <button onClick={this.handleInc}>+</button>
+          <button onClick={this.handleDnc}>-</button>
+          <button onClick={this.handleReset}>Reset</button>
+        </p>
       </div>
     );
   }