개인 프로젝트 - 리액트로 todolist 만들기 - working에 todo 추가하기

리액트로 todolist를 구현해보았습니다. 

구현해야 했던 기능 

1. input에 제목과 내용을 넣고 추가하기를 누르면 working에 추가되기

2. working에 있는 todo 완료 누르면 done으로 이동

3. done에 있는 todo 취소 누르면 working으로 이동

4. 삭제기능

 

1. AddTodo.js

 

useState hook을 이용하여 title과 item 의 초기값을 빈 배열로 만들어 준다. 

const AddTodo = ({ addTodo }) => {
  const [title, setTitle] = useState('');
  const [item, setItem] = useState('');

handleTitleChange 함수는 title 입력 필드의 변경 이벤트를 처리한다. 입력된 값으로 title 상태 변수를 업데이트 한다.

handleItemChange 함수는 item 입력 필드의 변경 이벤트를 처리한다. 입력된 값으로 item 상태 변수를 업데이트한다.

handleAddTodo는 새로운 할 일을 추가하기 위한 로직을 처리한다. 

이벤트 객체 e를 매개변수로 받고 조건문을 사용하여 조건에 만족하는지 검사한다.

1) title.trim() !== '' : 제목 필드에 입력된 값이 공백 문자를 제거한 후에도 빈 문자열이 아닌지 (할 일이 비어 있지 않은지)

2) item.trim() !== '': 위와 동일

3) (e.key === 'Enter' || e.target.tagName === 'BUTTON') : 이벤트가 발생한 요소가 enter키를 눌렀거나, 버튼인지 확인

1), 2), 3) 조건이 모두 참이라면, addTodo 콜백 함수를 호출하여 title과 item값을 인자로 전달한다.

 그 후 setTitle,setItem 을 호출하여 title과 item 상태 변수를 빈 문자열로 초기화 한다. 

const handleTitleChange = (e) => {
    setTitle(e.target.value);
  };

  const handleItemChange = (e) => {
    setItem(e.target.value);
  };

  const handleAddTodo = (e) => {
    if (title.trim() !== '' && item.trim() !== '' && (e.key === 'Enter' || e.target.tagName === 'BUTTON')) {
      addTodo(title, item);
      setTitle('');
      setItem('');
    }
  };

title과 item을 입력하는 필드와 추가하기 버튼 !

return (
    <div>
      <input className='inputTitle'
        type='text'
        placeholder='제목'
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        onKeyPress={handleAddTodo}
      /><br/>
      <input className='inputTodo'
        type='text'
        placeholder='할 일'
        value={item}
        onChange={(e) => setItem(e.target.value)}
        onKeyPress={handleAddTodo}
      /><br/>
      <button onClick={handleAddTodo}>추가하기</button>
    </div>
  );
};

export default AddTodo;

이제 이것을 working란에 넣도록 하겠습니다. 

title과 item 매개변수를 받아와서 새로운 할 일 객체를 생성하고, 기존의 할 일 목록 배열에 새로운 할 일을 추가하는 역할을 합니다.

const newTodo={...} //새로운 할 일 객체를 생성한다. id,title,item,isDone의 네 가지 속성으로 구성된다.

setTodos([...todos,newTodo]) //setTodo 함수를 호출하여 할 일 목록 배열을 업데이트 한다.

할 일들을 local storage에 저장하여 새로고침을 했을 때 todo목록이 초기화 되지 않도록 한다.

const saveToLocalStorage = (todos) => {
    localStorage.setItem('todos', JSON.stringify(todos));
  };

todos배열을 filter메서드를 사용하여 각 todo를 순회하면서 새로운 배열을 생성한다. 

각 할 일에 대해 todo 컴포넌트를 생성하도록 한다.  아래 todo,markTodoAsDone,removeTodo,key 와 같은 props가 전달된다.

key={todo.id} 각 할 일에 고유한 키('id')를 설정한다. 

todo 배열에서 아직 완료되지 않은 할 일들을 필터링 한다. 

{todos
        .filter((todo) => !todo.isDone)
        .map((todo) => (
          <Todo
            todo={todo}
            markTodoAsDone={handleMarkTodoAsDone}
            removeTodo={handleRemoveTodo}
            key={todo.id}
          />
        ))}