React (3) - 클래스형 컴포넌트

App.js

import logo from './logo.svg';
import './App.css';
import React from 'react';
import TodoList from './TodoList'

function App() {
  return (
    <div>
      <h1>Hello Comstudy21</h1>
      <TodoList title="할일 목록"/>
    </div>
  );
}

export default App;

 

TodoList.js

import logo from './logo.svg';
import './App.css';
import React from 'react';

// 1. 클래스형 컴포넌트
// 2. 함수형 컴포넌트
// 3. 외부 파일에 컴포넌트 선언

class TodoList extends React.Component{
  constructor(props){
    console.log(props.title);
    super(props);

    this.state = {
      data: "hahaha"
    };
  }

  render(){
    let styleObj = {"color": "blue", "textDecoration": "underline"};
    return (<>
      <h2>Todo List</h2>
      <div>
        <label htmlFor="">할일: </label>
        <input type="text" value={this.state.data} onChange={(e)=>{
          var value = e.currentTarget.value;
          this.setState({
            data: value
          });
        }}/>
        <div id="status">상태: {this.state.data}</div>
        <ol>
          <li>
            <span style={styleObj}>프로젝트</span>
            <button>출발</button>
            <button>도착</button>
          </li>
        </ol>
      </div>
    </>);
  }

}

function App() {
  return (
    <div>
      <h1>Hello Comstudy21</h1>
      <TodoList title="할일 목록"/>
    </div>
  );
}

export default TodoList;