📝 今日作った

反応課復習

📚 習ったこと

useState/props/memo/propTypes/useEffect

1.「やり直し」の練習

1）単位変換器の作成

変数をinputのvalueに割り当て、その値が変化したときに要素を再レンダリングし、onChange関数にイベントを検出します.target.valueの値をinputの値にします.

2)todo listの作成

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]); // 여기서 todo가 ""는 아니다. (∵ 아직 리렌더링 x)
  };
  
  return (
    <div>
      <form onSubmit={onSubmit}>
        <input onChange={onChange} value={todo} />
        <button>추가</button>
      </form>
      <ul>
        {todos.map((todo, index) => <li key={index}>{todo}</li>)}
      </ul>
    </div>
  );
}

export default App;

3）コイン追跡装置の製作

(コードチャレンジ)
世界中のすべての暗号化通貨の種類をもたらします.
通貨を選択して金額を入力すると、ドル硬貨の価値が表示されます.

// App.js
import { useState, useEffect } from "react";
import Input from "./Input";

function App() {
  const [loading, setLoading] = useState(true);
  const [coins, setCoins] = useState({});
  const [amount, setAmount] = useState(0);
  const [selectValue, setSelectValue] = useState("select");
  const [disabled, setDisabled] = useState(true);

  const onInputValueChange = (event) => setAmount(event.target.value);
  const onSelectValueChange = (event) => {
    setSelectValue(event.target.value);
    event.target.value === "select" ? setDisabled(true) : setDisabled(false);
    setAmount(0);
  };

  useEffect(() => {
    fetch("https://api.coinpaprika.com/v1/tickers")
      .then((response) => response.json())
      .then((json) => {
        setCoins(json);
        setLoading(false);
      });
  }, []);

  return (
    <div>
      <h1>Coin Traker {loading ? "" : `(${coins.length})`}</h1>
      {loading ? (
        <h3>로딩 중입니다...</h3>
      ) : (
        <select onChange={onSelectValueChange} value={selectValue}>
          <option value="select">Select the currency</option>
          {coins.map((coin) => (
            <option
              value={coin.quotes.USD.price}
              key={coin.id}
            >{`${coin.name}(${coin.symbol})`}</option>
          ))}
        </select>
      )}
      <br />
      <Input onChange={onInputValueChange} value={amount} disabled={disabled} />
      <br />
      <Input
        value={selectValue === "select" ? 0 : amount * selectValue}
        disabled={disabled}
        readOnly={true}
      />
    </div>
  );
}

export default App;

// Input.js
import PropTypes from "prop-types";

function Input({ onChange, value, disabled, readOnly }) {
  return (
    <input
      onChange={onChange}
      value={value}
      disabled={disabled}
      readOnly={readOnly}
    ></input>
  );
}

Input.propTypes = {
  onChange: PropTypes.func,
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
  disabled: PropTypes.bool.isRequired,
  readOnly: PropTypes.bool,
};

export default Input;

明日作った

作成

movie app