[TIL] 220316

leesyongยท2022๋…„ 3์›” 16์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
198/204
post-thumbnail

๐Ÿ“ ์˜ค๋Š˜ ํ•œ ๊ฒƒ

  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 ๋งŒ๋“ค๊ธฐ
profile
๋Šฅ๋™์ ์œผ๋กœ ์‚ด์ž, ํ–‰๋ณตํ•˜๊ฒŒ๐Ÿ˜

0๊ฐœ์˜ ๋Œ“๊ธ€