제목: “Error: Object is Not Valid as React Child” 수정하는 방법
소개
리액트를 배우다가 “Error: Objects are not valid as a React child”라는 오류 메시지를 만났다면, 올바른 자리에 있습니다. 이 블로그 포스트에서는 리액트 코드에서 이 문제를 해결하기 위한 문제 해결 방법을 안내합니다. 제공된 코드 스니펫을 통해 문제가 되는 부분을 식별하고, 올바르게 작동하도록 필요한 수정 사항을 설명합니다.
오류 이해하기
이 오류 메시지는 리액트가 객체를 자식으로 렌더링할 수 없다는 것을 나타냅니다. 제공된 코드에서 callApi 함수는 프로미스를 반환하는데, 이는 리액트 자식 컴포넌트로 직접 사용할 수 없습니다.
이 문제를 해결하기 위해 비동기 작업을 올바르게 처리하고 원하는 데이터를 렌더링하기 위해 상태를 설정해야 합니다.
해결책: 상태와 라이프사이클 유지
리액트 함수 컴포넌트에서 상태를 유지하고 업데이트하기 위해 useState와 useEffect 훅을 사용합니다. 다음은 수정된 코드입니다:
const Number = () => {
const [data, setData] = useState([]);
function createNumbers() {
const originalArray = new Array(10).fill(0);
return originalArray.map(() => Math.floor(Math.random() * 100)).join('');
}
useEffect(() => {
async function getNumbers() {
try {
const res = await fetch(`http://numbersapi.com/${createNumbers()}/math`);
const data = await res.json();
setData(data);
} catch (err) {
console.log(err);
}
}
getNumbers();
}, []);
return (
<div className="container">
{Object.entries(data).map(([key, value]) => (
<div className="item" key={key}>
{value}
</div>
))}
</div>
);
};
export default Number;
설명
수정된 코드를 한 단계씩 살펴보겠습니다:
1. 상태 관리를 위한 useState
useState([])를 사용하여 빈 배열로 상태를 초기화합니다. 이 경우에는 상태 변수 data가 가져온 숫자와 관련된 사실을 저장합니다.
2. 숫자 배열 생성하기
createNumbers 함수는 동일한 대로 동작하며, 무작위 숫자로 이루어진 배열을 생성한 뒤 문자열로 결합합니다. 이 문자열은 숫자 사실을 검색하기 위해 API URL의 일부로 사용됩니다.
3. 데이터를 가져오기 위한 useEffect
useEffect 훅은 API에서 숫자 사실을 가져오는 역할을 합니다. 컴포넌트가 마운트될 때 비어 있는 의존성 배열 ([])을 가지고 실행됩니다.
4. 데이터 가져오고 설정하기
getNumbers 함수 내에서 fetch API를 사용하여 생성된 숫자 문자열에 대한 사실을 가져옵니다. 그런 다음, res.json()를 사용하여 응답을 파싱하고 얻은 데이터를 상태 변수 setData(data)에 설정합니다.
5. 데이터 렌더링하기
리턴 구문에서는 Object.entries(data).map을 사용하여 데이터 상태의 항목들을 순회합니다. 이를 통해 키-값 쌍을 반복하고 이를 컨테이너 내에서 개별 <div> 요소로 렌더링합니다.
결론
제공된 수정 사항을 구현함으로써, 리액트 코드에서 “Error: Objects are not valid as a React child” 오류를 해결할 수 있습니다. 비동기 작업을 올바르게 처리하고, useState 훅을 사용하여 상태를 유지하고, 필요한 데이터를 useEffect 훅 내에서 가져오는 것을 기억하세요.
이제 숫자 사실을 가져와 리액트 애플리케이션에서 정상적으로 표시할 수 있고, 어떠한 렌더링 오류도 발생하지 않을 것입니다.
코딩을 즐기세요!
