[React] 쌩초보가 반드시 겪는 오류 : 즉시실행함수

 

Q. index.js 에서 ReactDOM이 뭘까?

 

ReactDOM 은 라이브러리이다. 돔 조작하는 라이브러리

React 도 사용자 UI 를 만들기 위한 라이브러리,

React-Router-Dom 도 라우팅을 관리하기 위한 라이브러리,

Styled-component 도 CSS-in-JS 라이브러리

 

알고보면 리액트는 전부 다 라이브러리의 조합이다,,

 

 

---

 

 

 

버튼에 이벤트를 걸어줄 때,

() =>  화살표 함수 말고 즉시실행함수로 했더니

렌더링 중에 상태 업데이트를 피하라는 오류가 났다!!

예전에 리액트 배웠을 때도, 항상 처음에 접했던 오류같다.

 

<button className='delete-btn' onClick={handleDelete(expense.id)}>삭제</button> //즉시실행(에러)
<button className='delete-btn' onClick={() => {handleDelete(expense.id)}}>삭제</button>

react-dom.development.js:86 Warning: Cannot update a component (`App`) 
while rendering a different component (`ExpenseItem`). 
To locate the bad setState() call inside `ExpenseItem`, 
follow the stack trace as described in 
https://reactjs.org/link/setstate-in-render

    at ExpenseItem (http://localhost:3000/static/js/bundle.js:353:3)
    at div
    at ExpenseList (http://localhost:3000/static/js/bundle.js:469:3)
    at App (http://localhost:3000/static/js/bundle.js:36:82)

즉시실행함수를 사용하면 계속해서 setState 변경이 일어나서, 렌더링 중에도 계속적으로 호출되는 문제가 나타난다.

호출이 되면 렌더링이 되고 렌더링이 되면 또 호출이 되는,, 무한루프로 빠지기 때문에 반드시 익명함수로 작성해주어야 한다.