[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 이슈를 만났다. 흔한 이슈이므로 작성하면서 이런 에러가 왜 발생했는지 써두고자 한다.

코드

	import React, { useState } from "react";
	const content = [
	{
	tab: "Section 1",
	content: "I am the content of the section 1"
	},
	{
	tab: "Section 2",
	content: "I am the content of the section 2"
	}
	];
	const useTabs = (initialTab, allTabs) => {
	const [currentIndex, setCurrentIndex] = useState(initialTab);
	if (!allTabs || !Array.isArray(allTabs)) { // (*1)
	return;
	}
	return {
	currentItem: allTabs[currentIndex],
	changeItem: setCurrentIndex // (*2)
	};
	};
	export default function App() {
	const { currentItem, changeItem } = useTabs(0, content);
	return (
	<div className="App">
	<h1>
	Hello CodeSandbox{" "}
	<span role="img" aria-label="eye emoji">
	👀
	</span>
	</h1>
	{content.map((section, index) => (
	<button key={index} onClick={() => changeItem(index)}>
	{section.tab}
	</button>
	))}
	<div>{currentItem.content}</div> <!-- (*3) -->
	</div>
	);
	}

view raw useTab.js hosted with ❤ by GitHub

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를 보여주면 해결할 수 있다.