react - nomad

coin  tracker

import { useEffect, useState } from "react";

function App() {
  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>
      ) : (
        <select>
          {coins.map((coin) => (
            <option>
              {coin.name} ({coin.symbol}): ${coin.quotes.USD.price} USD
            </option>
          ))}
        </select>
      )}
    </div>
  );
}
export default App;

map 사용과 effect사용 이해 어려움

공부 할 것 

 

 

To Do List

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(currentArray => [toDo, ...currentArray]);
setToDo("");
console.log(toDos);
};
return (
<div>
<form onSubmit={onSubmit}>
<input
onChange={onChange}
value={toDo}
type="text"
placeholder="write your to do..."
/>
<button>Add To Do</button>
</form>
</div>
);
}
export default App;