React 변수 사용법

참고링크

React에서 fun과 변수를 사용하여 숫자를 기록해보겠다.

React를 통해 동적으로 작동하는 메소드를 알아보자.

useState 메소드를 이용해서 버튼 클릭할때마다 숫자 증가 및 감소.

그리고 numRecording 메소드를 통해서 저장된 숫자 리스트를 저장.

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

function App() {

  const [num, setNum] = useState(1);

  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)=>(
          <li>{num}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

---

아래는 부분별로 나눠서 함수를 분리한 내용이다.

코드가 길어지는 경우 아래와 같이 처리하는 방식이 좋다.

기능은 비슷하다.

 

App.js : 

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

const RecordForm = ({numList, setNumList}) => {

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

  return (
  <div>
      <div>현재 숫자 : {num}</div>
      <button onClick={() => setNum(num+1)}>숫자 증가</button>
      <button onClick={() => setNum(num-1)}>숫자 감소</button>
      <button onClick={() => setNum(0)}>숫자 초기화</button>

      <hr/>
      <button onClick={() => setNumList([...numList, num])}>숫자 기록</button>
      <button onClick={() => setNumList([])}>기록 초기화</button>
  </div>
  ) 

}

const RecordList = ({numList}) => {
  return (
    <div>
        <h2>기록된 숫자</h2>
        <ul>
        {numList.map((num)=>(
          <li>{num}z</li>
        ))}

        </ul>
        
    </div>
   )
}

function App() {

  const [numList, setNumList] = useState([]);

  return(
    <div style={{margin: "40px auto",
                 width :"800px",
                 textAlign:"center"
                }}>
                  
        <RecordForm numList={numList} setNumList={setNumList}/>
        <RecordList numList={numList}/>
    </div>

  )
 
}

export default App;