useState로 숫자 기록, 리스팅

진행 순서

1. 현재 숫자 출력
2. 버튼을 눌러서 증가, 감소 구현
3. 저장 버튼을 눌러서 현재 숫자 저장(저장 시 숫자 초기화)
4. 리스트로 저장된 숫자 보여주기

[...numList, num]

: numList 에 있던 기존 데이터들을 넣어준 후 끝 부분에 num을 저장한다.

{numList.map ( (num) => ( <li>{num}</li> ) ) }

: numList의 배열에 num으로 하나씩 접근하여 li 형태로 출력한다.

리스트 예제

import React, {useState} from 'react';
import './App.css';

function App() {

  const [num,setNum] = useState(0);
  const [numList,setNumList] = useState([]);

  function numRecording() {
    setNumList([...numList, num]);  // 기존 배열을 넣어주고 현재 숫자를 마지막으로 저장함.
    setNum(0);
  }

  return (
    <div className="App">
      <div> 현재 숫자 : {num} </div>
      <button onClick={ () => {setNum(num+1)} }> 숫자 증가 </button>
      <button onClick={ () => {setNum(num-1)} }> 숫자 감소 </button>
      <button onClick={numRecording}> 숫자 기록 </button>
      <h1>저장된 숫자</h1>

      <ul>
        {numList.map((num) => ( // 배열안에 있는 데이터를 하나씩 num이라는 이름으로 빼오겠다.
          <li>{num}</li>  // 데이터를 한줄씩 빼올 때마다 li에 넣어준다.
        ))}
      </ul>
      
    </div>
  );
}

export default App;

참고 영상

https://www.youtube.com/watch?v=ze0V1BhtnEc