24.05.21_TIL React (리엑트) _ 4. to-do-list, Coin Tracker, Movie site

티스토리 뷰

React (Javascript) 공부

24.05.21_TIL React (리엑트) _ 4. to-do-list, Coin Tracker, Movie site

티아(tia) 2024. 5. 21. 10:06

728x90

1. to-do-list를 만들어보자.

import { useState } from "react";

function App() {
  const [toDo, setToDo] = useState("");
  const onChange = (event) => setToDo(event.target.value);
  console.log(toDo);
  return (
    <div>
      <input 
      onChange={onChange}
      value={toDo}
      type="text" 
      placeholder="Write your to do ..." 
      />
    </div>
  );
}

export default App;

import { useState } from "react";

function App() {
  const [toDo, setToDo] = useState("");
  const onChange = (event) => setToDo(event.target.value);
  const onSubmit = (event) => {
    event.preventDefault()
    console.log(toDo);
  }
  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;

add to do 를 누르면 console 이 하나씩 늘어나는 것을 볼 수 있다.

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;
    }
    setToDo(""); // 안에 수정하는 값이 들어갈 수 있고 함수가 들어갈 수도 있음
    setToDos(currentArray => [toDo, ...currentArray]);
    // ...currentArray 는 []의 안에 인자를 추가해준다.
  };
  console.log(toDos);

인자가 계속 추가되는 것을 볼 수 있다.

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>
    </div>

몇 개의 인자가 있는지 , 몇개를 추가 했는지 적어주기 위해서 코드를 넣어준다.

  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) => (<li>{item}</li>))}
        // map함수로 item(변수) 의 인자를 가져온다.
      </ul>
    </div>
  );

 <ul> 
    {toDos.map((item, index) => (
  	<li key={index}>{item}</li>))}
 </ul>

key 로 고유의 key 값을 부여함 배열로 정의해서..map으로

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;
    }
    setToDo(""); // 안에 수정하는 값이 들어갈 수 있고 함수가 들어갈 수도 있음
    setToDos(currentArray => [toDo, ...currentArray]);
    // ...currentArray 는 []의 안에 인자를 추가해준다.
  };
  console.log(toDos);
  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 App;

2. Coin Tracker 연결해서 list 작성

먼저 로딩때 쓸 화면을 세팅해준다.

import { useState } from "react";

function App() {
  const [loading, setLoading] = useState(true);

  return (
    <div>
      <h1>The Coins!</h1>
      {loading ? <strong>Loading ... </strong> : null}      
    </div>
  );
}

export default App;

그 다음에는 가져올 API를 가져올 준비를 해보자

https://api.coinpaprika.com/v1/tickers

import { useEffect, useState } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    fetch("https://api.coinpaprika.com/v1/tickers");
  }, []);
  return (
    <div>
      <h1>The Coins!</h1>
      {loading ? <strong>Loading ... </strong> : null}      
    </div>
  );
}

export default App;

console 의 network 를 확인해보면 잘 받아오는 것을 확인 할 수 있다. 200으로 잘 떨어짐

const [loading, setLoading] = useState(true);
  useEffect(() => {
    fetch("https://api.coinpaprika.com/v1/tickers").then((response) => response.json()).then((json) => console.log(json));
  }, []);

json 방식으로 데이터를 가져온다. 2000개의 코인자료를 가져온 것을 볼 수 있다.

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!({coins.length})</h1>
      {loading ? <strong>Loading ... </strong> : null}
      <ul>
        {coins.map((coin) => (
          <li>
            {coin.name} ({coin.symbol}) : ${coin.quotes.USD.price} USD
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

const [coins, setCoins] = useState([]); 여기에서 [] 로 빈값을 넣어주지 않으면 에러가 난다.

[] 빈값을 기본적으로 가지고 있어야함.

null 값 안에 select 를 넣어서 로딩화면이 아니면 보여줄 수 있게 바꾸어준다.

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;

3. 영화보여주기

import { useEffect, useState } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    fetch(
      `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.5&sort_by=year`
    ).then((response) => response.json()).then((json) => console.log(json));
  }, []);
  return (
    <div>
      {loading ? <h1>Loading ...</h1> : null}
    </div>
  );
}

export default App;

화면에는 loading 만 보이지만 콘솔을 확인하면 영화의 데이터가 들어간 것을 확인할 수 있다.

function App() {
  const [loading, setLoading] = useState(true);
  const [movies, setMovies] = useState([]);
  useEffect(() => {
    fetch(
      `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.5&sort_by=year`
    ).then((response) => response.json()).then((json) => setMovies(json.data.movies));
  }, []);
  console.log(movies);

import { useEffect, useState } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  const [movies, setMovies] = useState([]);
  useEffect(() => {
    fetch(
      `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.5&sort_by=year`
    )
      .then((response) => response.json())
      .then((json) => {
        setMovies(json.data.movies);
        setLoading(false);
      });
  }, []);
  console.log(movies);
  return (
    <div>
      {loading ? <h1>Loading ...</h1> : null}
    </div>
  );
}

export default App;

이 코드를 요즘 쓰는 코드로 다시 바꾸어보자.

import { useEffect, useState } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  const [movies, setMovies] = useState([]);
  const getMovies = async () => {
    const response = await fetch(
      `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.5&sort_by=year`
    );
    const json = await response.json();
    setMovies(json.data.movies);
    setLoading(false);
  };
  useEffect(() => {
    getMovies();
  }, []);
  console.log(movies);
  return (
    <div>
      {loading ? <h1>Loading ...</h1> : null}
    </div>
  );
}

export default App;

import { useEffect, useState } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  const [movies, setMovies] = useState([]);
  const getMovies = async () => {
    const response = await fetch(
      `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.5&sort_by=year`
    );
    const json = await response.json();
    setMovies(json.data.movies);
    setLoading(false);
  };
  useEffect(() => {
    getMovies();
  }, []);
  console.log(movies);
  return (
    <div>
      {loading ? (<h1>Loading ...</h1>) : 
      (<div>
        {movies.map((movie) => (
        <div key={movie.id}>{movie.title}</div> 
        ))}</div>
      )}
    </div>
  );
}

export default App;

영화 제목을 볼 수 있다.

return (
    <div>
      {loading ? (<h1>Loading ...</h1>) : 
      (<div>
        {movies.map((movie) => (
        <div key={movie.id}>
          <h2>{movie.title}</h2>
          <p>{movie.summary}</p>
          <ul>{movie.genres.map(g => <li key={g}>{g}</li>)}</ul>
        </div>))}
      </div>)}
    </div>
  );

++ 맵은 항상 key 가 있어야 한다.!!

  return (
    <div>
      {loading ? (<h1>Loading ...</h1>) : 
      (<div>
        {movies.map((movie) => (
        <div key={movie.id}>
          <img src={movie.medium_cover_image} />
          <h2>{movie.title}</h2>
          <p>{movie.summary}</p>
          <ul>{movie.genres.map(g => <li key={g}>{g}</li>)}</ul>
        </div>))}
      </div>)}
    </div>
  );

이미지 까지 나오게 완성!

'React (Javascript) 공부' 카테고리의 다른 글

24.05.23_TIL React (리엑트) _ 6. css 꾸미기 완료 (0)	2024.05.23
24.05.22_TIL React (리엑트) _ 5. 영화사이트 만들기 (React Router)+깃허브 배포 (0)	2024.05.22
24.05.20_TIL React (리엑트) _ 3. useEffect & Cleanup function (0)	2024.05.20
24.05.17_TIL React (리엑트) _ 2. npm 실행, 버튼 만들기 (0)	2024.05.17
24.05.17_TIL React (리엑트) _ 1. 함수변경 (분, 시를 변경해보자), props (0)	2024.05.17

TAG more

최근에 올라온 글

개발자 공부합니다

티스토리 뷰