React 복습 - To Do List, CoinTracker

• part 1

import { useState } from 'react';
import './App.css';

function App() {
  const [toDo, setTodo] = useState(""); // string으로 받기 위해 "" 빈 값을 넣어준다.
  const [toDos, setTodos] = useState([]);
  const onChange =(event) =>{
    setTodo(event.target.value);
  }
  const onSubmit = (event) => {
    event.preventDefault();
    if (toDo === ""){
      return;
    }
    setTodos((current) => [toDo, ...current]);
    setTodo("");
  }
  console.log(toDos);
  

  return (
    <div>
      {/* // jsx 넣고싶다면 {} 중괄호를 사용해야 한다. */}
      <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>
    </div>
  );
}

export default App;

• part2

['there', 'are', 'you', 'are', 'how', 'hello!'].map((item) => item.toUppderCase())

['THERE', 'ARE', 'YOU', ARE', 'HOW', 'HELLO!']가 return 된다.

import { useState } from 'react';
import './App.css';

function App() {
  const [toDo, setTodo] = useState(""); // string으로 받기 위해 "" 빈 값을 넣어준다.
  const [toDos, setTodos] = useState([]);
  const onChange =(event) =>{
    setTodo(event.target.value);
  }
  const onSubmit = (event) => {
    event.preventDefault();
    if (toDo === ""){
      return;
    }
    setTodos((current) => [toDo, ...current]);
    setTodo("");
  }
  console.log(toDos);
  

  return (
    <div>
      {/* // jsx 넣고싶다면 {} 중괄호를 사용해야 한다. */}
      <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 App;

리스트 만들기

• Coin Tracker (useEffect) 연습

useEffect를 사용해서 api를 불러온다.

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 ? <string>Loading...</string>
        : <select>{coins.map((coin)=> (
        	<option key={coin.id}> 
            	{coin.name} ({coin.symbol}) : ${coin.quotes.USD.price} USD
            </option>
			))}
      </select>}
    </div>
  ) 
}