📝 오늘 한 것

1. react 강의 복습

📚 배운 것 (복습)

useState / props / memo / propTypes / useEffect

1. React Hook 연습

1) 단위 변환기 만들기

input의 value에 변수를 할당하고 onChange 함수에 의해 감지된 해당 input의 event.target.value의 값이 input의 value가 되도록 하여 그 값이 변화할 때마다 컴포넌트가 리렌더링 되어 화면이 다시 그려지도록 한다.

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) coin tracker 만들기

( 코드 챌린지 )

전 세계 암호 화폐 종류를 모두 가져온다.
화폐를 선택한 후 액수를 입력하면 USD coin 가치를 보여준다.

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

✨ 내일 할 것

1. movie app 만들기