[21/11/27] TIL_onClick 무한 렌더링,

21/11/27 TIL

 

onClick event 무한 렌더링. (Room > serchbox.index.js)

아래 코드는 무한 렌더링 된다.

const clickTag = useCallback( async (tag) =>{
    setSearchKeyword(tag);
	...
    
// 함수의 결과값
<div onClick = {clickTag(tag)} >

 

렌더링시 onClick(clickTag(tag))의 함수가 실행되며 clickTag(tag)의 결과값을 받아오는 과정에서 setSearchKeyword(tag) 코드에 의해 state의 변화가 생기고 이 상태변화는 렌더링을 초래한다. 즉

렌더링 -> 함수실행 -> state 변화 -> 렌더링 -> 함수실행 -> state 변화 -> 렌더링 -> 함수실행 -> state 변화 ->....

무한 반복 !

 

그래서 함수 객체형태를 나타내는 arrow function 형태나 함수명 뒤 ()를 없애면 된다. ex) onClick(clickTag)

하지만 여기선 인자값 tag를 전달해야 하므로 arrow function form인 onClick(()=>clickTag(tag))가 적절하다.

 

const clickTag = useCallback( async (tag) =>{
    setSearchKeyword(tag);
	...

// 객체 형태로 함수 전달
onClick ={()=>clickTag(tag)}