7. Practice Movie App

import { useState, useEffect } from "react";

function ToDoList() {
  const [toDo, setToDo] = useState("");
  const [toDos, setToDos] = useState([]);
  const onChange = (event) => setToDo(event.target.value);
  const onSubmit = (event) => {
    event.preventDefault();
    if (toDo === "") {
      return;
    }
    setToDo("");
    setToDos((currentArray) => [toDo, ...currentArray]);
  };
  return (
    <div>
      <h1>My To Dos ({toDos.length})</h1>
      <form onSubmit={onSubmit}>
        <input
          onChange={onChange}
          value={toDo}
          type="text"
          placeholder="Write your to do..."
        />
        <button>Add To Do</button>
      </form>
      <hr />
      <ul>
        {
          toDos.map((item, index) => (
            <li key={index}>{item}</li>
          ))
        }
      </ul>
    </div>
  );
}

export default ToDoList;

• ...사용하여 추가하기
  ...을 쓰면 앞 내용들을 다 가져올 수 있다.

• map함수 사용하기
  배열의 아이템만큼 새로운 아이템을 만들어서 return한다.
  첫번째 argument를 아이템으로 두번재 argument를 index로 가진다. key prop가 고유한 값으로 있어야한다.

import { useState, useEffect } from "react";

function CoinTracker() {
  const [loading, setLoading] = useState(true);
  const [coins, setCoins] = useState([]);
  useEffect(() => {
    fetch("https://api.coinpaprika.com/v1/tickers")
    .then((response) => response.json())
    .then((json) => {
      setCoins(json);
      setLoading(false);
    });
  }, []);
  return (
    <div>
      <h1>The Coins! {loading ? "" : `(${coins.length})`}</h1>
      {loading ? (
        <strong>Loading...</strong>
      ) : (
        <ul>
        {
          coins.map((coin, index) => 
          <li key={index}>
            {coin.name} ({coin.symbol}) : ${coin.quotes['USD'].price} USD
          </li>)
        }
        </ul>
      )}
    </div>
  );
}

export default CoinTracker;

• 로딩 if 문이 신기했다. 로딩 중이면 로딩...이렇게 뜨고 아니면 저렇게 li나 option혹은 select로 바꿔줄 수 있다.