Imperative.js

Imperative.js

import React, { useState } from 'react';
import List from './List';

export default () => {
  const [input, setInput] = useState('');
  let todos = [];
  
  return (
    <div>
      <input
        type="text"
        value={input}
        onChange={event => setInput(event.target.value)}
      />
      <button
        onClick={() => {
          todos = [...todos, input];
          const listElement = document.getElementById('list');
          const newTodo = document.createTextNode(input); 
          listElement.appendChild(newTodo)
        }}
      >
        확인
      </button>
      <List id="list">
        {todos}
      </List>
    </div>
  );
};