React JS - 05

1. useState 를 이용하여 list 값 추가하기 & map 함수 이용

 - 기존의 변수 선언과 같이 코드를 작성하고 빈 배열로 초기화해준다.

 - [ setList ( listName => [...listName, valueName]) ] 형식으로 새로운 value 를 기존의 리스트에 추가할 수 있다.

 - map 함수를 아용하여 리스트에 있는 값들에 접근할 수 있다.

 - map 함수의 첫번째 인자는 리스트 내의 요소를 가져오고, 두번째 인자는 해당 요소의 index 를 가져온다.

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();
    // console.log(todo);
    if (todo == "") return;
    setTodo("");
    setTodos(currentArray => [...currentArray, todo]);
  }
  console.log(todos);
  return (
    <div>
      <h1>My Todos {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 />
      {todos.map((item, index) => ( <div key={index}>{index + 1} :  {item}</div>))} 
    </div>
  );
}
// map 을 이용하여 추가한 항목 나타내기

export default App;

 

2. api 가져와서 데이터 활용하기

 - fetch 를 이용하여 데이터를 가져와 가져온 데이터를 리스트에 저장한다.

 - 리스트에 map 함수를 이용하여 데이터를 나타낼 수 있다.

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);

  }, [])
  console.log(coins);
  return (
    <div>
      <h1>Coins! {loading ? "nothings" : `(${coins.length})`}</h1>
      {loading ? <strong>Loading...</strong> : null}
      <select>
        {coins.map((coin) => <option>
          {coin.name} ({coin.symbol}) : ${coin.quotes.USD.price} USD
          </option>)}
      </select>
    </div>
  );
}

// select, option 이용해서 달러를 btc 로 전환하는 챌린지

export default App;

3. 영화 정보 보여주기

 - async 함수를 이용해서 비동기로 api 를 가져온다.

 - 위의 비트코인 정보를 가져오는 것과 같은 과정으로 진행된다.

import { useEffect, useState } from "react";

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

  useEffect(async () => {
    const json = await (
      await fetch
      (`https://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key={개인키}&targetDt=20230820`
      )
      ).json();
    setMovies(json.boxOfficeResult.dailyBoxOfficeList);
    setLoading(false);
  }, []);

  console.log(movies);
  return(
    <div>
      <h1>{loading ? "nothings" : `hot movies : ${movies[0].movieNm}`}</h1>
      {loading ? <h1>Movie loading...</h1> : 
      <div>
          {movies.map((movie) => { return <li key={movie.rank}>{movie.rank} {movie.movieNm}</li>})}
        </div>}
    </div>
  )
  
}

// 오우 일단.. map 함수는 map(함수);
// map ( () => {retrun ()}) -> 형태여야 오류가 안나는듯??
// fetch 는 백틱으로 감싸줘서 사용가능함....

export default App;

4. router 사용하기

 - router 를 이용하여 다른 페이지로 이동할 수 있다.

 - 배고파요...

 - [ <Route path="/pageName"><pageName/></Route> ] 형식으로 페이지 url을 설정한다.

 - 기본 페이지는 Home.js 로 옮겨 App.js 에서 태그로 사용한다.

 - 기본 페이지에서 리스트 형식으로 나오는 영화 이름 또한 component로 빼서 Movie.js 를 생성한다. 

 

App.js

import { useEffect, useState } from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from 'react-router-dom';
import Home from "./routes/Home";
import Detail from "./routes/Detail";

function App() {
  return <Router>
    <Switch>
      <Route path="/detail" ><Detail /></Route>
      <Route path="/"><Home /></Route>
    </Switch>
  </Router>;
  
}

export default App;

Movie.js

import PropTypes from 'prop-types';
import {Link} from 'react-router-dom';

function Movie({rank, name}) {
    console.log();
    return (
    <div>
        <li><Link to="/detail">{rank} {name} </Link></li>
        <p>{name} : Movie infromation </p>
    </div>
    );
}

Movie.propType ={
    rank: PropTypes.string.isRequired,
    name: PropTypes.string.isRequired,
}
 export default Movie;

Home.js

import { useEffect, useState } from "react";
import Movie from "../components/Movie.7.4";

function Home() {
  const [loading, setLoading] = useState(true);
  const [movies, setMovies] = useState([]);

  useEffect(() => {
    async function getMovies (){
    const json = await (
      await fetch
      (`https://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key={개인키}&targetDt=20230820`
      )
      ).json();
    setMovies(json.boxOfficeResult.dailyBoxOfficeList);
    setLoading(false);
    }
    getMovies();
  }, []);

  console.log(movies);
  return(
    <div>
      <h1>{loading ? "nothings" : `hot movie: ${movies[0].movieNm}`}</h1>
      {loading ? <h1>Movie loading...</h1> : 
      <div>
          {movies.map((movie) => { return <Movie key={movie.rank}rank={movie.rank} name={movie.movieNm }/>})}
        </div>}
    </div>
  )
  
}

// url 주소에 따라서 서로 다른 페이지를 보여줌 
// router 는 url을 보는 거임
// useEffect 부분 사용 수정 -> indirect function 으로 사용


export default Home;

 

5. url 에 parameter 전달하고 가져오기

 - url 을 설정할 때 [ /:parameterName ] 형식으로 추가해서 url 에 parameter 을 넘겨주고 가져올 수 있다.

 - 예를 들어 "/:id/:name" url 은 id, name parameter 을 가져온다. 

 - 밑의 코드는 영화 리스트의 제목을 click 했을 때 해당 영화가 개봉했을 때의 가장 인기있는 영화의 제목이 나타난다. 

 App.js

import { useEffect, useState } from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from 'react-router-dom';
import Home from "./routes/Home";
import Detail from "./routes/Detail";

function App() {
  return <Router>
    <Switch>
      <Route path="/detail/:id/:date" ><Detail /></Route>
      <Route path="/"><Home /></Route>
    </Switch>
  </Router>;
  
}

export default App;

Home.js

import { useEffect, useState } from "react";
import Movie from "../components/Movie.7.4";

function Home() {
  const [loading, setLoading] = useState(true);
  const [movies, setMovies] = useState([]);

  useEffect(() => {
    async function getMovies (){
    const json = await (
      await fetch
      (`https://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key={개인키}&targetDt=20230820`
      )
      ).json();
    setMovies(json.boxOfficeResult.dailyBoxOfficeList);
    setLoading(false);
    }
    getMovies();
  }, []);

  console.log(movies);
  return(
    <div>
      <h1>{loading ? "nothings" : `hot movie: ${movies[0].movieNm}`}</h1>
      {loading ? <h1>Movie loading...</h1> : 
      <div>
          {movies.map((movie) => { return <Movie key={movie.rank} date={movie.openDt}id={movie.rank} rank={movie.rank} name={movie.movieNm }/>})}
        </div>}
    </div>
  )
  
}

// url 주소에 따라서 서로 다른 페이지를 보여줌 
// router 는 url을 보는 거임
// useEffect 부분 사용 수정 -> indirect function 으로 사용


export default Home;

Detail.js

import { useEffect } from "react";
import { useParams } from "react-router-dom/cjs/react-router-dom.min";
function Detail() {
    var { id, date } = useParams();
    console.log(id, date);
    var reform = date.split("-");
    date = reform[0] + reform[1] + reform[2]


    useEffect(()=> {
        async function getFetch() {
            const json = await( await fetch(
                `https://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key={개인키}&targetDt=${date}`
            )).json();
            console.log(json);
        }
        getFetch();
    }, [])
    return <h1>Detail router</h1>
}

export default Detail;

Movie.js

import PropTypes from 'prop-types';
import {Link} from 'react-router-dom';

function Movie({id,rank, name, date}) {
    console.log();
    return (
    <div>
        <li><Link to={`/detail/${id}/${date}`}>{rank} {name} </Link></li>
        <p>{name} : Movie infromation </p>
    </div>
    );
}

Movie.propType ={
    rank: PropTypes.string.isRequired,
    name: PropTypes.string.isRequired,
}
 export default Movie;

 

이상으로 react JS 에 대한 공부글은 마무리하겠습니당

이후엔 react app에 대한 프로젝트 글로 돌아올게요~

완강한거 뿌듯합니당 ㅎㅎ