[리액트] Too many re-renders. React limits the number of renders to prevent an infinite loop.

단순히 props로 받은 데이터를 onClick 이벤트가 발생했을 때 파라미터로 넘겨줄 생각이었다. 근데 뜬금없는 에러가 발생..

<Select
                  options={numberOfPeople}
                  onChange={handleNums(idx, lang.value, e)}>
                  필요인원
</Select>

function handleNums(idx, lang.value, e) {

	setState(lang.value);

}

셀렉터 클릭이벤트 발생시, 함수를 호출하여 해당 함수 내부에서 setState를 하게 되니 무한 리로딩이 발생하였다.

해결방법

<Select
                  options={numberOfPeople}
                  onChange={(e) => {
                    handleNums(idx, lang.value, e);
                  }}
                >
                  필요인원
                </Select>

화살표함수를 onChange{()=>{}} 내부에 이렇게 넣어서 함수를 실행시키면, 무한 리로드를 방지할 수 있다.

해당 return ( ) 부분이 아닌, 변수 선언부에서 해당 에러 발생시, useEffect를 이용하거나, useCallback, useMemo를 이용하면 무한 리로딩을 방지할 수 있다.