[React] render methods should be a pure function of props and state

render methods should be a pure function of props and state

 

render 내에 setState 등을 호출해서 계속 렌더링 되면 이런 오류가 뜬다. 난 호출한 적 없는데...?! 알고보니 자식 컴포넌트로 setState 하는 function 을 props 로 전달해준 뒤, onClick 에 할당해줬는데.... 이런 형태로 할당해줘서 생긴 문제였다.

handleClick = (e) => {
	this.setState({value:e});
}

onClick={handleClick(value)}

 

handleClick(value) 는 함수 실행문이다!!!! 난 함수를 실행하고 있었던 것이다.... 따라서 아래처럼 수정해줘야 한다.

handleClick = (e) => {
	this.setState({value:e});
}

onClick={() => handleClick(value)}