useState와 function

1. 무한루프

import React from 'react';
import './App.css';

function App() {
  console.log('rendering')
  const [test1, setTest1] = React.useState();
  console.log(test1)
  const testfunction1 = () => {
    setTest1(1)
    console.log(test1);
    return console.log('함수의 리턴값');
  }

  return (
    <div className="App">
      <button onClick={testfunction1()}>
        함수 실행
      </button>
    </div>
  );
}

export default App;

결과 :

Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

처음 렌더링 - testfunction1() -> setTest1 -> rerendering 이후 무한 루프가 발생하게 된다.

2. 함수실행과 setState로 인한 rendering

import React from 'react';
import './App.css';

function App() {
  console.log('rendering')
  const [test1, setTest1] = React.useState();
  const [test2, setTest2] = React.useState();
  console.log(test1);
  console.log(test2)
  const testfunction2 = () => {
    console.log('testfunction2');
  }
  const testfunction1 = () => {
    setTest1(1)
    console.log(test1);
    testfunction2();
    setTest2(1);
    console.log(test2);
    return console.log('함수의 리턴값');
  }

  return (
    <div className="App">
      <button onClick={testfunction1}>
        함수 실행
      </button>
    </div>
  );
}

export default App;

결과 :

처음 렌더링

App.js:5 rendering
App.js:8 undefined
App.js:9 undefined

// 버튼 클릭  - 1
App.js:15 undefined
App.js:11 testfunction2
App.js:18 undefined
App.js:19 함수의 리턴값
App.js:5 rendering --- (1)
App.js:8 1
App.js:9 1

// 버튼 클릭 - 2
App.js:15 1
App.js:11 testfunction2
App.js:18 1
App.js:19 함수의 리턴값
App.js:5 rendering
App.js:8 1
App.js:9 1

//버튼 클릭 -3
App.js:15 1
App.js:11 testfunction2
App.js:18 1
App.js:19 함수의 리턴값

처음 렌더링 : rendering 발생, test1과 test2는 초기값이 없으므로 undefined로 설정되어있다.

버튼 클릭 - 1 : 함수 속 실행값이 나온 후 (1)값부터 setTest1로 인해 rerendering이 되어 설정된 값이 나오게된다

버튼 클릭 -2 : 똑같은 값이 나와야하는데도 불구하고 useState로 인해서 rerendering이 또 발생하게된다. 이유는 아래 링크를 참조https://stackoverflow.com/questions/57652176/react-hooks-usestate-setvalue-still-rerender-one-more-time-when-value-is-equal

React hooks useState setValue still rerender one more time when value is equal

버튼 클릭 -3 : 이전 값과 비교하여 차이가 없어 rendering이 발생하지 않고 함수 내 만 실행이 된다.

3. aysnc과 useState 그리고 function

import React from 'react';
import './App.css';

function App() {
  console.log('rendering')
  const [test1, setTest1] = React.useState();
  const [test2, setTest2] = React.useState();
  const testfunction2 = () => {
    console.log('testfunction2');
  }
  const testfunction1 = async () => {
    setTest1(1)
    console.log(test1);
    await testfunction2();
    console.log(test2);
    setTest2(1);
    return console.log('함수의 리턴값');
  }

  return (
    <div className="App">
      <button onClick={testfunction1}>
        함수 실행
      </button>
    </div>
  );
}

export default App;

결과 :

App.js:5rendering

// 버튼 클릭 -1
App.js:13 undefined
App.js:9 testfunction2
App.js:5 rendering
App.js:15 undefined
App.js:5 rendering
App.js:17 함수의 리턴값

// 버튼 클릭 -2
App.js:13 1
App.js:9 testfunction2
App.js:5 rendering
App.js:15 1
App.js:17 함수의 리턴값

// 버튼 클릭 -3
App.js:13 1
App.js:9 testfunction2
App.js:15 1
App.js:17 함수의 리턴값

버튼 클릭 - 1 : rendering이 2번 일어나고 있다. 원래라면 function안 useState들은 다 합쳐 한번의 렌더링이 일어나게 되지만 await로 인해서 setTest1과 setTest2가 따로 작동하게 된다.

버튼 클릭 - 2 : 위와 같은 이유로 rendering이 한번 일어나고 2번째에도 일어나야하나 2번에서 이유로 일어나지안는다.

버튼 클릭 - 3 : 함수만 작동