to do list 만들기_5 (초기 state 정의와 Form 기능 구현)

초기 state 를 정의

src/App.js

import React, { Component } from 'react';
import ToDoListTemplate from './components/ToDoListTemplate';
import Form from './components/Form';
import ToDoItemList from './components/ToDoItemList';


class App extends Component {

  id = 3 // 이미 0,1,2 가 존재하므로 3으로 설정

  state = {
    input: '',
    todos: [
      { id: 0, text: ' 리액트 소개', checked: false },
      { id: 1, text: ' 리액트 소개', checked: true }
      { id: 2, text: ' 리액트 소개', checked: false }
    ]
  }

  render() {
    return (
      <ToDoListTemplate form={<Form/>}>
        <ToDoItemList/>
      </ToDoListTemplate>
    );
  }
}

export default App;

 

 

Form 기능 구현

src/App.js

import React, { Component } from 'react';
import ToDoListTemplate from './components/ToDoListTemplate';
import Form from './components/Form';
import ToDoItemList from './components/ToDoItemList';


class App extends Component {

  id = 3 // 이미 0,1,2 가 존재하므로 3으로 설정

  state = {
    input: '',
    todos: [
      { id: 0, text: ' 리액트 소개', checked: false },
      { id: 1, text: ' 리액트 소개', checked: true },
      { id: 2, text: ' 리액트 소개', checked: false }
    ]
  }

  handleChange = (e) => {
    this.setState({
      input: e.target.value // input 의 다음 바뀔 값
    });
  }

  handleCreate = () => {
    const { input, todos } = this.state;
    this.setState({
      input: '', // 인풋 비우고
      // concat 을 사용하여 배열에 추가
      todos: todos.concat({
        id: this.id++,
        text: input,
        checked: false
      })
    });
  }

  handleKeyPress = (e) => {
    // 눌려진 키가 Enter 면 handleCreate 호출
    if(e.key === 'Enter') {
      this.handleCreate();
    }
  }

  render() {
    const { input } = this.state;
    const {
      handleChange,
      handleCreate,
      handleKeyPress
    } = this;

    return (
      <ToDoListTemplate form={(
        <Form 
          value={input}
          onKeyPress={handleKeyPress}
          onChange={handleChange}
          onCreate={handleCreate}
        />
      )}>
        <ToDoItemList/>
      </ToDoListTemplate>
    );
  }
}

export default App;

 

 

TodoItemList 에서 배열을 TodoItem 컴포넌트 배열로 변환하기

src/App.js  👉 render 함수

render() {
    const { input, todos } = this.state;
    const {
      handleChange,
      handleCreate,
      handleKeyPress
    } = this;

    return (
      <ToDoListTemplate form={(
        <Form 
          value={input}
          onKeyPress={handleKeyPress}
          onChange={handleChange}
          onCreate={handleCreate}
        />
      )}>
        <ToDoItemList todos={todos}/>
      </ToDoListTemplate>
    );
  }

 

 

그 다음엔, TodoItemList 를 열어서 객체배열을 컴포넌트 배열로 변환

src/components/ToDoItemList.js

import React, { Component } from 'react';
import ToDoItem from './ToDoItem';

class ToDoItemList extends Component {
  render() {
    const { todos, onToggle, onRemove } = this.props;

    const todoList = todos.map(
      ({id, text, checked}) => (
        <TodoItem
          id={id}
          text={text}
          checked={checked}
          onToggle={onToggle}
          onRemove={onRemove}
          key={id}
        />
      )
    );

    return (
      <div>
        {toDoList}    
      </div>
    );
  }
}

export default ToDoItemList;

 

체크 상태 변경 외의 부분 완료!