[React] 카운터, 기록 기능만들기 // js반복문

* 반복문 

배열.map(   (i) => 사용  )

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

배열.map 하면, for each와 유사하다.

for( auto num : list)와 유사하다.

num이름으로 배열을 순회한다.

 

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

function App() {

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

  function numRecording() {
    setNumList([...numList, num]);
    //기존의 배열에 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) =>(
            <li>{num}</li>
          ))}
      </ul>
        

      
    </div>

  );
}

export default App;

 

* 실행결과