💥에러원인

useState에 set함수를 쓰는 중에 오류가 났다.

리액트 무한루프 랜더링

import React, { useState } from "react";

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

  return (
    <div>
      <h3>Counter</h3>
      <button onClick={setNum(num - 1)}>-</button>
      <button>{num}</button>
      <button onClick={setNum(num + 1)}>+</button>
    </div>
  );
}

export default AppStateReducer;

🚩해결

import React, { useState } from "react";

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

  const down = () => {
    setNum(num - 1);
  };
  const reset = () => {
    setNum(0);
  };
  const up = () => {
    setNum(num + 1);
  };

  return (
    <div>
      <h3>Counter</h3>
      <button onClick={down}>-</button>
      <button onClick={reset}>0</button>
      <button onClick={up}>+</button>
      <span>{num}</span>
    </div>
  );
}

export default AppStateReducer;

→ onclick에서 바로 set함수를 써주지 않고, 위에서 함수명을 따로 지정해서 입력하니 오류가 해결되었다!