[React] To-do list 만들기

📌환경

Mac

VSCode

 

 

📌추가하기

`input`에 할일을 입력하고 엔터를 입력(또는 추가 버튼 클릭)할일 목록이 추가되어야 한다.

 

function App() {
  return (
    <div>
      <h1>할일 목록</h1>
      <form>
        <input
          type="text"
          placeholder="할 일"
        />
        <button>추가</button>
      </form>
    </div>
  );
}

export default App;

 

기본 태그를 만들어주고, 변경된 값을 추적하기 위한 `useState`와 `onChange` 함수를 추가한다.

 

  const [toDo, setTodo] = useState("");
  const [todoList, setTodoList] = useState([]);

  function onChange(e) {
    setTodo(e.target.value);
  }
  
  // ...
  
  <form onSubmit={onSubmit}>
        <input
          onChange={onChange}
          value={toDo}
          type="text"
          placeholder="할 일"
        />
        <button>추가</button>
      </form>

 

이제 `input` 입력 값의 변경이 감지되면 `todo`가 변경된다. 

할일을 입력하면 `input`이 리셋되어야하고, 입력된 `todo`를 모두 가지는 리스트가 있어야 한다. `todoList`와 `onSubmit` 함수를 만들어준다.

 

const [toDo, setTodo] = useState("");
const [todoList, setTodoList] = useState([]);

function onChange(e) {
	setTodo(e.target.value);
}

function onSubmit(e) {
    e.preventDefault();
    if (toDo === "") {
      return;
    }
    setTodoList((currentArray) => [toDo, ...currentArray]);
    setTodo("");
}
  
useEffect(() => console.log(todoList), [todoList]);
  
  // ...
  
  
<form onSubmit={onSubmit}>
    <input
      onChange={onChange}
      value={toDo}
      type="text"
      placeholder="할 일"
    />
    <button>추가</button>
</form>

 

 

 

 

`setTodoList`의 인자로 함수가 전달되는 것을 볼 수 있다. `todo`를 붙인 새 배열로 `todoList`를 변경해줘야 하기 때문에, 현재의 `todoList`를 불러와서(얕은 복사), `toDo`와 `todoList`를 붙여준다. 이때 배열이 `[toDo, currentArray]`가 되면 배열 안에 `currentArray` 배열이 들어간 이상한 모양(할일, [Array]) 이 되기 때문에 spread 연산자(...)를 사용해서 배열의 요소를 꺼내와야 한다. 

`todoList`를 얕은 복사한 `currentArray`가 할일 목록을 가진 배열이기 때문에, `...currentArray`는 `[셋, 둘, 하나]` 처럼 사용할 수 있다.

 

* 최신 할일이 하단에 추가되는 것이 좋다면 `setTodoList((currentArray) => [toDo, ...currentArray]);`로 작성하면 된다.

 

📌 출력하기

할일을 추가했으니 목록을 보여줘야한다. 리액트 컴포넌트의 return문 안에는 중괄호를 열어 자바스크립트를 사용할 수 있다. 자바스크립트의 `map()` 함수를 사용하여 `todoList`의 모든 요소에 대해 `<li>`태그에 넣어 출력할 수 있도록 작성한다.

* 할일 목록이 0개라면 `n개`가 출력되지 않도록 변경할 수 있다.

 

 return (
    <div>
      <h3>
        할일 목록 {todoList.length == 0 ? null : "| " + todoList.length + "개"}
      </h3>
      <form onSubmit={onSubmit}>
        <input
          onChange={onChange}
          value={toDo}
          type="text"
          placeholder="할 일"
        />
        <button>추가</button>
      </form>
      <hr />
      {todoList.map((item, index) => (
        <li key={index}>
          {index + 1}. {item}
        </li>
      ))}
    </div>
  );

 

 

 

 

📌 삭제하기

목록 중 하나를 삭제하려면 출력 시 삭제 버튼을 함께 출력해야한다. `map()` 함수 안에 삭제 버튼을 추가해주고, `onClick` 이벤트를 추가한다. `todoList`를 변경해야하므로 배열의 `filter()` 함수를 사용했다.

 

  
  function changeTodoList(e) {
    console.log(e);
    let item = e.target.value;
    setTodoList((currentArray) =>
      currentArray.filter((element) => element !== item)
    );
  }
  
 
  
  // ...
  
  
  return (
    <div>
      <h3>
        할일 목록 {todoList.length == 0 ? null : "| " + todoList.length + "개"}
      </h3>
      <form onSubmit={onSubmit}>
        <input
          onChange={onChange}
          value={toDo}
          type="text"
          placeholder="할 일"
        />
        <button>추가</button>
      </form>
      <hr />
      {todoList.map((item, index) => (
        <li key={index}>
          {index + 1}. {item}
          <button value={item} onClick={changeTodoList}>
            삭제
          </button>
        </li>
      ))}
    </div>
  );

 

 

 

 

 

 

 

📌참고

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders

전개 구문 - JavaScript | MDN