ABOUT ME

Today
Yesterday
Total
  • [react] Too many re-renders. React limits the number of renders to prevent an infinite loop.
    react+vue 2022. 9. 22. 14:50

    react 실습을 하던 중 잘 따라하고 있다고 생각했는데 위의 에러 메세지를 만났다.

    문제 코드

    function App() {
      const [list, setList] = useState([1, 2, 3, 4]);
      const [str, setStr] = useState("합계");
      
      const getAddResult=()=>{ 
        let sum = 0;
        list.forEach(i => sum = sum + i);
        console.log("sum", sum);
        console.log("getAddResult 실행됨");
        return sum;
      }
      return <div>
        <button onClick={setStr("안녕")}>문자 변경</button>
        <button onClick={() => { setList([...list,10]); }}>리스트값 추가</button>
        <div>
          {list.map(i => (<h1>{ i}</h1>))}
        </div>
        <div>{ str}:{getAddResult()}</div>
      </div>
    }
    
    export default App;
    

    App함수가 실행될때 onClick 이벤트 핸들러가 로드되면서 setStr(”안녕”) 함수가 실행된다.

    실행 과정이 App()⇒ setStr(”안녕”)⇒상태변수 변경으로 UI reload ⇒App()…무한 반복이 된다.

     

    해결 방법

    function App() {
      const [list, setList] = useState([1, 2, 3, 4]);
      const [str, setStr] = useState("합계");
      
      const getAddResult=()=>{ 
        let sum = 0;
        list.forEach(i => sum = sum + i);
        console.log("sum", sum);
        console.log("getAddResult 실행됨");
        return sum;
      }
      return <div>
        <button onClick={()=>setStr("안녕")}>문자 변경</button>
        <button onClick={() => { setList([...list,10]); }}>리스트값 추가</button>
        <div>
          {list.map(i => (<h1>{ i}</h1>))}
        </div>
        <div>{ str}:{getAddResult()}</div>
      </div>
    }
    
    export default App;
    

    onClick 이벤트 핸들러에 함수를 실행시키지 말고, 실행될 함수를 만들어준다

    setStr(”안녕”); X

    ()⇒setStr(”안녕”); O

    'react+vue' 카테고리의 다른 글

    [react] useRef  (0) 2022.09.22
    [react] useMemo  (0) 2022.09.22
    [javascript] import/export 방법  (0) 2022.09.21
    [react] useEffect  (0) 2022.09.21
    [react] useState  (1) 2022.09.21

    댓글

Designed by Tistory.