[React] ReactJS로 영화 웹 서비스 만들기 7

💡 JavaScript로 만들어봤었던 todo를 React를 이용해서 만들어 보자!

🔴 초기 셋팅

---

function App() {
  return <div></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();
    if(toDo === "") {
      // 비어 있으면 함수를 실행시키지 않음
      return;
    }
    setToDo(""); // input을 비워줌
  };
  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;

• import는 꼭 잊지말고 해줘야한다.
• form태그안에 input과 button태그를 넣어줬다.
• input 태그에 onChange 이벤트 리스너를 넣어줘서 값이 바뀔 때마다 이벤트가 생성되게끔 해줬다.
• form 태그에 event.preventDefault();로 새로고침이 안되게 해줘야한다. 아니면 submit되서 새로고침이 되어버린다.
• useState를 써서 초기 값은 빈칸이고, toDo의 state가 변할 때마다 setter 함수인 setToDo가 값을 갱신해줄 것이다.

🟠 todo를 todos에 배열로 담기

---

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(""); // input을 비워줌
  };
  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>
  );
}

• const [toDos, setToDos] = useState([]); 코드를 작성해줬다.
• 초기 값은 배열이고, ..array의 의미는 기존 array에 index들을 가져온다는 의미

🟡 map메서드로 todo리스트 목록 출력하기

---

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(''); // input을 비워줌
  };
  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) => (
          <li>{item}</li>
        ))}
      </ul>
    </div>
  );
}

• map 사용방법
  
• 배열의 요소들을 콜백함수를 이용해서 원하는 방식으로 표현할 수 있다.

🟢 콘솔에 뜬 경고문구 해결하기

---

• 계속 콘솔에 key 어쩌구저쩌구 오류가 뜬다.

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

• key 속성으로 해결할 수 있다.
• todo 완성이다.

🔵 coin tracker 초기 셋팅

---

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;

• loading의 초기값은 true이다.
• 그래서 <strong>Loading...</strong> -> 화면에 출력해주고 있는 것
  

🟣 fetch API로 JSON 요청하기

---

import { useState, useEffect } from 'react';

function App() {
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    fetch('https://api.coinpaprika.com/v1/tickers')
      .then((response) => response.json()) // response로 부터 json을 추출
      .then((json) => console.log(json));
    // 빈배열은 딱 한번만 실행 된다.
  }, []);
  return (
    <div>
      <h1>The Coins</h1>
      {loading ? <strong>Loading...</strong> : null}
    </div>
  );
}

• coinpaprika 이 곳에서 코인 관련 정보를 가지고 있는 JSON 파일을 불러올 것이다.
• useEffect(() => {}, []); 에서 빈배열의 역할은 컴포넌트가 화면에 가장 처음 렌더링 될 때 한 번만 실행하고 싶을 때 쓰는 것이다.
  
  

🟤 coins 변수에 코인 arrary 담기

function App() {
  const [loading, setLoading] = useState(true);
  const [coins, setCoins] = useState([])
  useEffect(() => {
    fetch('https://api.coinpaprika.com/v1/tickers')
      .then((response) => response.json()) // response로 부터 json을 추출
      .then((json) => {
        setCoins(json);
        setLoading(false);
      });
  }, []);
  return (
    <div>
      <h1>The Coins</h1>
      {loading ? <strong>Loading...</strong> : null}
    </div>
  );
}

• 받아온 JSON 파일을 coins의 셋터에 담아준다.
• 그리고 loading을 false로 바꿔준다.

🟤 map으로 json 화면에 출력

function App() {
  const [loading, setLoading] = useState(true);
  const [coins, setCoins] = useState([]); // empty array로 만들어서 undefined가 반환되지 않게 해야함 -> coins.length에서 오류가 남
  useEffect(() => {
    fetch('https://api.coinpaprika.com/v1/tickers')
      .then((response) => response.json()) // 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>
  );
}

• coins안에 들은 코인 배열들을 ul태그로 화면에 출력해준다.
• 코인 이름, 코인 심볼 등 자기가 원하는 속성만 골라서 출력해줄 수 있다.
  

🟤 select태그로 바꾸고, loading 일 때는 개수 안보여주기

function App() {
  const [loading, setLoading] = useState(true);
  const [coins, setCoins] = useState([]);
  useEffect(() => {
    fetch('https://api.coinpaprika.com/v1/tickers')
      .then((response) => response.json()) // 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>
  );
}

• loading 일 때는 개수가 안보이게 JS를 통해서 코드를 작성해줬다.
• null자리에 select태그로 바꾼 코인 배열을 담는다.
• false로 바뀌면서 null이 실행 되었는데 null에 내용을 담아줘서 이제 코인 select박스가 보일 것이다.