리액트로 Todo list 만들기 / 기본편 1 (입력, 삭제)

요구사항

1. Input 창에 값이 입력될 수 있도록 한다.
2. 입력된 값을 추가 버튼 클릭으로 하단에 보여줄 수 있게 한다.
3. 입력받은 todo 값을 삭제할 수 있도록 한다.
4. 추가 )  input창에 Enter 키 입력으로 입력된 값이 바로 출력될 수 있게 한다.

---

기본 UI 구현

• TodoList.jsx 컴포넌트와 TodoItem.jsx 컴포넌트를 생성한다.
• TodoList.jsx

const TodoList = () => {
  return (
    <div>
      <h1>오늘의 할 일</h1>
      <input
        type="text"
        placeholder="오늘의 할일을 입력하세요"
      />
      <button>추가</button>
      <ul>할일 목록</ul>
    </div>
  );
};

export default TodoList;

 

• TodoItem.jsx

const TodoItem = ( ) => {
  // 인라인 스타일로 간단하게 UI 정리
  return (
    <div style={{ display: 'flex', marginBottom: 5 }}>
      <li style={{ marginRight: 5 }}>오늘의 할 일</li>
      <button>삭제</button>
    </div>
  );
};

export default TodoItem;

 

---

기능 구현

1. input에 onChange이벤트 이용하여 input의 value값을 입력받는다.

• useState를 이용하여 입력받은 값 상태관리, 초기값은 빈문자열로 받는다. 
• setState를 이용해 입력값을 업데이트한다. 
• input 태그의 value 속성에 state inputs를 입력하여 상태관리가 될 수 있게 한다.

import { useState } from 'react';

const TodoList = () => {
  const [inputs, setInputs] = useState('');
  
  const onChange = (e) => {
    setInputs(e.target.value);
  };
 
  ... [생략]

return(
<input
        type="text"
        placeholder="오늘의 할일을 입력하세요"
        value={inputs}
        onChange={onChange}
      />
      
  ... 생략     
)};

 

2. 추가 버튼 클릭을 통해 입력받은 input값을 리스트에서 읽을 수 있게 받아오기

• 입력한 inputs 값을 배열로 받아올 수 있게 useState로 상태관리 할 수 있게 배열 값을 만들어준다
• handleSubmit 함수 생성
  • inputs 값이 빈 문자열일 경우 값이 입력되지 않도록 조건문을 생성한다.  
  • setState 함수에 배열에 불변성을 지키기위해 먼저 스프레드 연산자를 이용해 이전 배열을 불러온다.
    • 이전 배열 뒤에 객체를 생성해 todo에 고유한 id값이 들어갈 수 있도록하여 todo 값을 쉽게 관리할 수 있도록 한다.

const handleSubmit = () => {
    if (inputs !== '') {
      setTodos([
        ...todos,
        {
          id: Date.now(),
          text: inputs,
        },
      ]);
    }

    setInputs('');
  };

 

• 추가 버튼에 onClick 이벤트를 이용하여 함수 연결

 <button onClick={handleSubmit}>추가</button>

 

3. TodoItem 컴포넌트에서 받아온 배열을 보여줄 수 있게 하기

• map 함수를 이용해 모든 배열 원소가 출력될 수 있도록 TodoItem 컴포넌트 보여준다.
• todo 값을 TodoItem 컴포넌트에 props로 보내준다.

      <ul>
        {todos.map((todo) => (
          <TodoItem key={todo.id} todo={todo}/>
        ))}
      </ul>

 

4. Todo 삭제하기

• TodoItem 컴포넌트에 삭제 버튼을 클릭했을 때 todo 가 삭제 될 수 있도록 handleDelete 함수 생성
• id값을 인자로 받아온다.  filter함수를 이용하여 todos 배열 내 인자로 받아온 id와 todo.id의 값이 같은 원소를 제외한 원소가 보여줄 수 있도록 한다.

  const handleDelete = (id) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };

 

• TodoItem 컴포넌트에 handleDelete 함수를 props로 받아와 삭제 버튼과 연결해준다. 

<button onClick={() => handleDelete(todo.id)}>삭제</button>

 

5. 추가 ) Enter key 이벤트

• input 값 입력 시 바로 enter키로 handleSubmit 함수가 실행 될 수 있도록 한다.

const handleKeyEnter = (e) => {
    if (e.key === 'Enter') handleSubmit();
  };

 

• input 태그 내에 onKeyUp 이벤트를 이용해 handleKeyEnter 함수를 연결한다.

<input
        type="text"
        placeholder="오늘의 할일을 입력하세요"
        value={inputs}
        onChange={onChange}
        onKeyUp={handleKeyEnter}
      />

 

---

문제해결

🤔 문제

Enter Key 이벤트 생성 발생 오류 input 에 한글 값을 입력하면 마지막 한 글자가 추가로 출력되는 오류 발생

        ex ) '공부하기' 입력  👉  출력 : '공부하기', '기'

 

🥳 해결

handleKeyEnter 함수를 연결해준 이벤트를 onKeyDown 에서 onKeyUp으로 변경하니 쉽게해결됐다.

 

---

마무리

• 위의 코드는 폴더 별로 분리해서 3회 반복해서 연습했다.
• 간단한 기능이라고 쉽게 생각했는데 여전히 부족하고 모르는 부분이 많아 기능 구현에서 어려운 부분이 많았다. (연습 또 연습하자)
• 여기서 추가로 계속 기능 업데이트 및 라이브러리 추가해서 디벨롭해야겠다
• 여러번 반복하면 할 수 있다. 그리고 기초를 탄탄히 하자!!
• 위의 전체 코드는 깃헙에 올려두었다.