투두리스트(~7.1)

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>
      <h1>투두리스트</h1>
      <h3>오늘의 할 일이 {todos.length}개 남았습니다. </h3>
      <form onSubmit={onSubmit}>
      <input 
      onChange={onChange} 
      value={todo} 
      type="text" 
      placeholder="계획을 세우시오"/> 
       <button>추가하기</button>
       </form>
       <hr />
       <ul> 
       {todos.map((item, index)=>(
       <li key={index }>
        {item}
        </li>))}
       </ul>
      
    </div>
  );
}

export default App;

코인리스트 (7.2)

import { useState } from "react";
import { useEffect } from "react";
function App() {
  const[load, setLoad]=useState(true);
  const[coins, setCoins]=useState([]); 
  useEffect(() => {
    fetch("<https://api.coinpaprika.com/v1/tickers>")
    .then((response)=>response.json())
    .then((json)=>{
      setCoins(json);
      setLoad(false);
  });
  }, []);
  return(
    <div>
      <h1>코인 별 가격 (총 {load? "":coins.length} 개)</h1>
      {load ?<strong> 로딩중...</strong> : 
      <select>
        {coins.map((coin)=> 
        <option>
          {coin.name}({coin.symbol}): {coin.quotes.USD.price} USD
          </option>)}
      </select>}
    </div>
  );
}

export default App;
  

영화소개사이트(7.3-7.4)

movie.js

import PropTypes from "prop-types";

function Movie({medium_cover_image, title, summary, genres}){
    return   <div>
    <li><h2>{title}</h2> </li>
    <img src={medium_cover_image} alt={title} />
    <p>{summary}</p>
    <ul>
      {genres.map((g)=>(
    <li key={g}>{g}</li>
    ))}
    </ul>
  </div>;
}

Movie.propTypes={
    medium_cover_image:PropTypes.string.isRequired,
    title:PropTypes.string.isRequired,
    summary:PropTypes.string.isRequired,
    genres:PropTypes.arrayOf(PropTypes.string).isRequired
};

export default Movie;  

home.js

import { useState } from "react";

import { useEffect } from "react";

import Movie from "../components/movie";

function Home(){

const [load, setLoad]=useState(true);

const [movies, setMovies]=useState([]);

const getMovies = async()=>{

const json =await(

await fetch(

"https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year"