[React] Practice Movie App

 

#7 Practice Movie App

 

• 배열을 직접 수정하지 않고 배열에 요소를 추가하는 방법

1. 값을 직접적으로 수정

 

2. 함수를 인자로 넣기

setToDos((currentArray) => [toDo, ...currentArray]);

 

[6, array]

→ [6, [1, 2, 3]] (6과 array 가진다)

 

[6,... array]

→ [6, 1, 2, 3] (array의 element 돌려준다)

 

 

ex) toDo에 "hello"가 적혀 있는 상황에  "bye" 입력

→ 위의 코드는 밑처럼 변한다.

setToDos((“hello”) => ["bye",  “hello”]));

 

 

실행 페이지

 

 

• map 메서드 (Js 함수)

array의 모든 요소에 주어진 함수 호출, 그 결과 담은 새로운 배열 반환 (원본 배열 변경 x)

고유한 key 사용 !!

 

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

➣ index는 숫자다 (0, 1,...)

 

실행 페이지

 

---

<To Do List>

import Button from "./Button";
import styles from "./App.module.css";
import { useState, useEffect } 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("");
    };
    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;

 

 

---

 

 

< Coin Tracker >

실행 페이지

 

 

< Coin Tracker >

import Button from "./Button";
import styles from "./App.module.css";
import { useState, useEffect } 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 key={coin.id}>
                {coin.name} ({coin.symbol}): ${coin.quotes.USD.price}
              </option>
            ))}
          </select>
        )}
    </div>
  );
}

export default App;

 

---

< Movie App >

 

• Ract Router

페이지 전환

 

Terminal에서 밑 코드 입력 

npm install react-router-dom

 

 

• Router 종류

1. Hash Router

import {HashRouter as Router, Switch, Route} from "react-router-dom";

➣ 뒤에 # 붙는다

HashRouter 실행 패이지

 

HashRouter 실행 페이지

2. Browser Router

많이 사용

import {BrowserRouter as Router, Switch, Route} from "react-router-dom";

➣ 보통의 웹사이트처럼 생김

BrowserRouter 실행 페이지

BrowserRouter 실행 페이지

 

 

+) 글자수 제한

<p className="movie__summary">{summary.length > 235 ? `${summary.slice(0,235)}...`:summary}</p>

➣ 글자 수 0~235글자만 보여준다

 

 

• Link

브라우저 새로고침 없이도 유저를 다른 페이지로 이동시켜 주는 컴포넌트

import {Link} from "react-router-dom";

<Link to="/movie">{title}</Link>

 

Home 페이지

영화 이름 클릭시 이동 페이지

 

---

 

• url에 변수 넣기

<Route path="/movie/:id">

 

➣ "/movie/변수" 경로로 보낼 수 있다

 

/movie/변수

 

 

• useParams

url의 변수 알 수 있다

import { useParams } from "react-router-dom";
function Detail() {
    const x = useParams()
    console.log(x);
    return <h1>Detail</h1>;
  }

 

위 코드의 실행 페이지