📝 오늘 한 것

1. this / Big O notation / linked list

2. React로 to do list 만들기

📚 배운 것

this / Big O notation / linked list 과제는 private 폴더 참고

1. PRACTICE

1) React로 to do list 만들기

(1) todo state (할 일)

input의 value 값을 외부에서 사용할 수 있도록 todo state에 담았다.

import { useState } from "react";

function App() {
  const [todo, setTodo] = useState("");
  const onChange = (event) => setTodo(event.target.value);

  return (
    <div>
      <h1>할 일 목록</h1>
      <form>
        <input
          value={todo}
          onChange={onChange}
          placeholder="할 일 작성"
          autoFocus
        />
      </form>
    </div>
  );
}

export default App;

(2) todos state (할 일 목록)

form 요소 안에 submit button을 추가하고 form 태그에 onSubmit 이벤트를 등록했다.
submit button을 클릭해 제출한 todo를 화면에 업데이트하기 위해 todos state를 추가했다.

import { useState } from "react";

function App() {
  const [todo, setTodo] = useState("");
  const [todos, setTodos] = useState([]);

  const onChange = (event) => setTodo(event.target.value);
  const onSubmit = (event) => {
    event.preventDefault();
    if (todo === "") return;
    setTodos((prevTodos) => [todo, ...prevTodos]); // = 이전 todos 배열에 현재 todo를 unshift 한다
    setTodo("");
  };

  return (
    <div>
      <h1>할 일 목록({todos.length})</h1>
      <form onSubmit={onSubmit}>
        // 중략
        <button type="submit">추가</button>
      </form>
    </div>
  );
}

export default App;

(3) to do list 업데이트

submit button을 클릭하여 todos 배열에 현재 todo가 추가되어 todos state가 변하면 App 컴포넌트가 리렌더링 된다.
이를 이용해 전체 할 일 목록을 화면에 업데이트 할 수 있다.

현재 todos의 배열 안에는 todo들, 즉 text들이 item으로 들어 있다.
화면에 이를 보여주기 위해서는 그 item들을 li 태그 안에 집어넣은 후 이를 렌더링해야 한다.

todos state가 변할 때마다(App 컴포넌트가 리렌더링 될 때마다) {자바스크립트 코드} 안의 map()에 의해 할 일 목록 전체도 리렌더링 된다.
map()은 원래 배열을 변환한 새로운 배열을 return 하기 때문에 이를 이용하면 todos 배열의 item(text)를 li 요소로 바꿀 수 있다.

💡 Warning: Each child in a list should have a unique "key" prop.

React가 기본적으로 list에 있는 모든 item을 인식하기 때문에 list의 각각의 item에 대해서는 고유한 key 속성을 부여해야 한다.

// 최종 완성
import { useState } from "react";

function App() {
  const [todo, setTodo] = useState("");
  const [todos, setTodos] = useState([]);

  const onChange = (event) => setTodo(event.target.value);
  const onSubmit = (event) => {
    event.preventDefault();
    if (todo === "") return;
    setTodos((prevTodos) => [todo, ...prevTodos]);
    setTodo("");
  };

  return (
    <div>
      <h1>할 일 목록({todos.length})</h1>
      <form onSubmit={onSubmit}>
        <input
          value={todo}
          onChange={onChange}
          placeholder="할 일 작성"
          autoFocus
        />
        <button type="submit">추가</button>
      </form>
      <hr />
      <ul> // list의 각각의 item에 대해 key 속성을 부여해야 한다
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

✨ 내일 할 것

1. coin tracker