[리액트] 선택 상자, 버튼, 배열 저장

변수 (동적변수)

  const [num, setNum] = useState(0);
  const [arr, setArr] = useState([]);

usdState(0) : 0을 초기값으로 둔다.
useState([]) : 배열을 사용하겠다.

선택상자

<input
        type="number"
        value={num}
        onChange={(e) => setNum(e.target.valueAsNumber)}
      />

값이 변경될 때 마다 새로만든다.
onChange={(e) => setNum(e.target.valueAsNumber) 에서 e 는 매개변수이다. (마음대로 설정 가능)

버튼 (저장, 취소)

const save = () => {
    setNum(0);
    setArr([...arr, num]);
  };

 
      <button onClick={save}>저장</button>
&nbsp;
      <button onClick={() => setNum(0)}>취소</button>
      <hr />

setArr[...arr,num] : 배열에 num값을 저장함 (num)
※ 자바 스크립트에서는 ...는 배열임을 알려준다.

&nbsp : 간격을 둠
<hr /> : 밑줄을 만들어줌

배열 저장

 <ul>
        {arr.map((num, index) => (
          <li kye={index}>{num}</li>
        ))}
</ul>

• <ol>태그는 ordered list의 약자로, 숫자나 알파벳 등 순서가 있는 목록을 만드는 데 사용합니다
• <ul>태그는 unordered list의 약자로, 순서가 필요 없는 목록을 만듭니다
• <dl>태그는 definition list의 약자로, 사전처럼 용어를 설명하는 목록을 만듭니다.
• <li>태그는 list item의 약자로 <ol> 과 <ul>의 각 항목들을 나열할때 사용합니다.

전체로직

console.clear();

import React, { useState, useEffect } from "https://cdn.skypack.dev/react";
import ReactDOM from "https://cdn.skypack.dev/react-dom";

function App() {
  const [num, setNum] = useState(0);
  const [arr, setArr] = useState([]);

  const save = () => {
    setNum(0);
    setArr([...arr, num]);
  };
  return (
    <>
      <input
        type="number"
        value={num}
        onChange={(e) => setNum(e.target.valueAsNumber)}
      />
      &nbsp;
      <button onClick={save}>저장</button>
      &nbsp;
      <button onClick={() => setNum(0)}>취소</button>
      <hr />
      <div>num : {num}</div>
      <div>nums : {JSON.stringify(arr)}</div>
      <ul>
        {arr.map((num, index) => (
          <li kye={index}>{num}</li>
        ))}
      </ul>
    </>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

https://codepen.io/denist2322/pen/PoQjgYa

2022-05-21 (선택 상자, 저장, 취소, 저장)