200716 | add event handling at 01_react_jsx

wally-wally · Jul 16, 2020 · 4d45e4c · 4d45e4c
1 parent cfcba23
commit 4d45e4c
Show file tree

Hide file tree

Showing 5 changed files with 212 additions and 0 deletions.
diff --git a/08_react/01_react_jsx/00_hello-react/src/App.css b/08_react/01_react_jsx/00_hello-react/src/App.css
@@ -5,3 +5,17 @@
   font-weight: bold;
   padding: 16px;
 }
+
+.chapter {
+  color: crimson;
+  font-size: 30px;
+  font-weight: 600;
+}
+
+.chapter::before {
+  content: '<';
+}
+
+.chapter::after {
+  content: '>';
+}
diff --git a/08_react/01_react_jsx/00_hello-react/src/App.js b/08_react/01_react_jsx/00_hello-react/src/App.js
@@ -1,13 +1,23 @@
 import React from 'react';
+import './App.css';
 import Counter from './Counter';
 import Say from './Say';
+import EventPractice from './EventPractice';
+import EventPractice2 from './EventPractice2';
+import EventPractice3 from './EventPractice3';
 
 const App = () => {
   return (
     <div>
+      <div class="chapter">3장</div>
       <Counter />
       <hr />
       <Say />
+      <hr />
+      <div class="chapter">4장</div>
+      <EventPractice />
+      <EventPractice2 />
+      <EventPractice3 />
     </div>
   );
 };

diff --git a/08_react/01_react_jsx/00_hello-react/src/EventPractice.js b/08_react/01_react_jsx/00_hello-react/src/EventPractice.js
@@ -0,0 +1,63 @@
+import React, { Component } from 'react';
+
+class EventPractice extends Component {
+  state = {
+    message: ''
+  }
+
+  // constructor(props) {
+  //   super(props);
+  //   // 함수가 호출될 때 this는 호출부에 따라 결정되므로, 클래스의 임의 메서드가 특정 HTML 요소의 이벤트로 등록되는 과정에서
+  //   // 메서드와 this의 관계가 끊어져 버림
+  //   // 이 때문에 임의 메서드가 이벤트로 등록되어도 this를 컴포넌트 자신으로 제대로 가리키기 위해
+  //   // 메서드를 this와 바인딩하는 작업이 필요함
+  //   // 만약 바인딩하지 않은 경우라면 this가 undefined를 가리킴
+  //   this.handleChange = this.handleChange.bind(this);
+  //   this.handleClick = this.handleClick.bind(this);
+  // }
+
+  // handleChange(e) {
+  //   this.setState({
+  //     message: e.target.value
+  //   });
+  // }
+
+  // handleClick() {
+  //   alert(this.state.message);
+  //   this.setState({
+  //     message: ''
+  //   });
+  // }
+
+  // 하지만 바벨의 transform-class-properties 문법을 이용하여 화살표 함수를 사용하면 constructor 사용할 필요 없이 간단하게 작성 가능하다.
+  handleChange = (e) => {
+    this.setState({
+      message: e.target.value
+    });
+  }
+
+  handleClick = () => {
+    alert(this.state.message);
+    this.setState({
+      message: ''
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <h1>이벤트 연습</h1>
+        <input
+          type="text"
+          name="message"
+          placeholder="아무거나 입력해 보세요"
+          value={this.state.message}
+          onChange={this.handleChange}
+        />
+        <button onClick={this.handleClick}>확인</button>
+      </div>
+    );
+  }
+}
+
+export default EventPractice;
diff --git a/08_react/01_react_jsx/00_hello-react/src/EventPractice2.js b/08_react/01_react_jsx/00_hello-react/src/EventPractice2.js
@@ -0,0 +1,54 @@
+import React, { Component } from 'react';
+
+class EventPractice2 extends Component {
+  state = {
+    username: '',
+    message: ''
+  }
+
+  handleChange = e => {
+    this.setState({
+      [e.target.name]: e.target.value
+    });
+  }
+
+  handleClick = () => {
+    alert(`${this.state.username}: ${this.state.message}`);
+    this.setState({
+      username: '',
+      message: ''
+    });
+  }
+
+  handleKeyPress = e => {
+    if (e.key === 'Enter') {
+      this.handleClick();
+    }
+  }
+
+  render() {
+    return (
+      <div>
+        <h1>이벤트 연습2 - input 여러 개</h1>
+        <input
+          type="text"
+          name="username"
+          placeholder="사용자명"
+          value={this.state.username}
+          onChange={this.handleChange}
+        />
+        <input
+          type="text"
+          name="message"
+          placeholder="아무거나 입력해 보세요"
+          value={this.state.message}
+          onChange={this.handleChange}
+          onKeyPress={this.handleKeyPress}
+        />
+        <button onClick={this.handleClick}>확인</button>
+      </div>
+    );
+  }
+}
+
+export default EventPractice2;
diff --git a/08_react/01_react_jsx/00_hello-react/src/EventPractice3.js b/08_react/01_react_jsx/00_hello-react/src/EventPractice3.js
@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+
+const EventPractice3 = () => {
+  // 가독성 안 좋은 코드
+  // const [username, setUsername] = useState('');
+  // const [message, setMessage] = useState('');
+  // const onChangeUsername = e => setUsername(e.target.value);
+  // const onChangeMessage = e => setMessage(e.target.value);
+  // const onClick = () => {
+  //   alert(`${username}: ${message}`);
+  //   setUsername('');
+  //   setMessage('');
+  // }
+  // const onKeyPress = e => {
+  //   if (e.key === 'Enter') {
+  //     onClick();
+  //   }
+  // };
+
+  // 가독성 좋은 코드
+  const [form, setForm] = useState({
+    username: '',
+    message: ''
+  })
+  const { username, message } = form;
+  const onChange = e => {
+    const nextForm = {
+      ...form, // 기존의 form 내용을 이 자리에 복사한 뒤
+      [e.target.name]: e.target.value // 원하는 값을 덮어 씌우기
+    };
+    setForm(nextForm);
+  }
+  const onClick = () => {
+    alert(`${username}: ${message}`);
+    setForm({
+      username: '',
+      message: ''
+    })
+  }
+  const onKeyPress = e => {
+    if (e.key === 'Enter') {
+      onClick();
+    }
+  };
+
+  return (
+    <div>
+      <h1>이벤트 연습3 - 함수형 컴포넌트</h1>
+      <input
+        type="text"
+        name="username"
+        placeholder="사용자명"
+        value={username}
+        // onChange={onChangeUsername}
+        onChange={onChange}
+      />
+      <input
+        type="text"
+        name="message"
+        placeholder="아무거나 입력해 보세요"
+        value={message}
+        // onChange={onChangeMessage}
+        onChange={onChange}
+        onKeyPress={onKeyPress}
+      />
+      <button onClick={onClick}>확인</button>
+    </div>
+  );
+};
+
+export default EventPractice3;