[React.js] Re-rendering Issue & Objects are not valid as a React child

시작하며

Nomad Coder 강의 중 useTab 커스텀 훅 만드는 과정에서 제목에 써둔 것처럼 Re-rendering Issue와 Objects are not valid as a React 이슈를 만났다. 흔한 이슈이므로 작성하면서 이런 에러가 왜 발생했는지 써두고자 한다.

코드

Re-rendering Issue

정상적으로 작동할 때의 코드는 위 모습과 같다. 여기서 2번 주석 표시에서 실수를 하거나 아래 return 되는 리액트 컴포넌트의 onClick 부분을 잘못 적을 경우 Re-Rendering이 계속 발생할 수 있다.

useTabs 훅은 객체 하나를 return 해주고, App() 함수형 컴포넌트에서는 이를 사용할 수 있게 한다. 맨 처음 UseTabs는 useState를 통해 currentIndex라는 value 하나와 setCurrentIndex라는 _함수_를 값으로 받는다. 만일 주석 2를 changeItem: setCurrentIndex()로 작성하면 함수를 그대로 실행하는 셈이어서 함수를 참조만 할 때와 달리 항상 실행되는 Re-rendering 이슈를 겪게 된다. 또한, <button key={index} onClick={changeItem(index)}>처럼 작성해도 아래와 같은 에러를 보게 된다. 이는 맨 위 코드를 onClick={() => changeItem(index)}로 변경하면 해결할 수 있다.

Objects are not valid as a React Child

객체 자체를 렌더링해주려고 해서 나온 에러이다. 객체의 content를 화면에 보여주어야 하는데 객체를 렌더링 시도하려고 했기 때문이다. currentItem의 content를 보여주면 해결할 수 있다.