[React #27] ToDo List - Create

📌임시 데이터 생성

const mokData = [
  {
    id: 0,
    isDone: false,
    content: '리액트 공부',
    date: new Date().getTime(),
  },
  {
    id: 1,
    isDone: false,
    content: '치과',
    date: new Date().getTime(),
  },
  {
    id: 2,
    isDone: false,
    content: '운동하기',
    date: new Date().getTime(),
  },
  {
    id: 3,
    isDone: false,
    content: '장보기',
    date: new Date().getTime(),
  },
];

---

📌리스트 추가하기

App.jsx

import { useState, useRef } from 'react';
import './App.css';
import Header from './components/Header';
import Editor from './components/Editor';
import List from './components/List';

function App() {
  const [todos, setTodos] = useState(mokData);
  const idRef = useRef('4');

  const onCreate = (content) => {
    const newTodo = {
      id: idRef.current++,
      isDone: false,
      content: content,
      date: new Date().getTime(),
    };
    setTodos([newTodo, ...todos]);
  };

  return (
    <div className='App'>
      <Header />
      <Editor onCreate={onCreate} />
      <List />
    </div>
  );
}

export default App;

• state의 값은 반드시 상태 변화 함수를 호출해야 수정할 수 있음

Editor.jsx

import { useState } from 'react';

function Editor({ onCreate }) {

  const [input, setInput] = useState('');

  const onChange = (e) => {
    setInput(e.target.value);
  };
  
  const onSubmit = () => {
    onCreate(input);
  };

  return (
    <div className='Editor'>
      <input value={input} onChange={onChange} placeholder='새로운 Todo...' />
      <button onClick={onSubmit}>추가</button>
    </div>
  );
}

export default Editor;

 

---

📌완성한 Create를 Develop하기

빈 항목일 때

입력칸에 아무것도 없을 때 '추가' 버튼을 누른다면 추가하지 않고 해당 입력칸 포커스 주기

// 새로운 래퍼런스 객체 생성
const inputRef = useRef();

const onSubmit = () => {
	// 조건문
    if (input === '') {
      inputRef.current.focus();
      return;
    }
    onCreate(input);
};

// 속성 추가
<input ref={inputRef}/>

• 새로운 래퍼런스를 생성한 뒤 input 속성에 ref를 추가함
• state인 input의 값이 비어있다면 inputRef값에 포커스 한 뒤 리턴함

---

값을 입력했을 때

새로운 값을 또 입력하기 위해서 데이터로 잘 들어간 값은 지워주기

onCreate(input);
setInput('');

• onSubmit() 함수가 실행되었을 때 onCreate() 함수를 호출한 뒤 state를 빈 문자열로 초기화 하기

---

엔터키를 입력했을 때

키보드에 'enter'를 입력해도 리스트 추가하기

const onKeyDown = (e) => {
    if (e.keyCode === 13) {
      onSubmit();
}
    
<input onKeyDown={onKeyDown}/>

• input의 키보드를 눌렀을 때 이벤트를 발생하는 onKeyDown 속성 추가하기
• enter의 keyCode인 13번이 들어왔을 때 onCreate() 함수를 호출하기

---

📌최종코드

App.jsx

import { useState, useRef } from 'react';
import './App.css';
import Header from './components/Header';
import Editor from './components/Editor';
import List from './components/List';

const mokData = [
  {
    id: 0,
    isDone: false,
    content: '리액트 공부',
    date: new Date().getTime(),
  },
  {
    id: 1,
    isDone: false,
    content: '치과',
    date: new Date().getTime(),
  },
  {
    id: 2,
    isDone: false,
    content: '운동하기',
    date: new Date().getTime(),
  },
  {
    id: 3,
    isDone: false,
    content: '장보기',
    date: new Date().getTime(),
  },
];

function App() {
  const [todos, setTodos] = useState(mokData);
  const idRef = useRef('4');

  const onCreate = (content) => {
    const newTodo = {
      id: idRef.current++,
      isDone: false,
      content: content,
      date: new Date().getTime(),
    };
    setTodos([newTodo, ...todos]);
  };

  return (
    <div className='App'>
      <Header />
      <Editor onCreate={onCreate} />
      <List />
    </div>
  );
}

export default App;

Editor.jsx

import { useRef, useState } from 'react';

function Editor({ onCreate }) {
  const [input, setInput] = useState('');
  const inputRef = useRef();

  const onChange = (e) => {
    setInput(e.target.value);
  };

  const onSubmit = () => {
    if (input === '') {
      inputRef.current.focus();
      return;
    }

    onCreate(input);
    setInput('');
  };

  const onKeydonwn = (e) => {
    if (e.keyCode === 13) {
      onSubmit();
    }
  };

  return (
    <div className='Editor'>
      <input
        value={input}
        ref={inputRef}
        onChange={onChange}
        onKeyDown={onKeydonwn}
        placeholder='새로운 Todo...'
      />
      <button onClick={onSubmit}>추가</button>
    </div>
  );
}

export default Editor;

 

 

참고자료

이정환 Winterlood, '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지'