불변 위반: 객체는 React 자식으로 유효하지 않습니다.

때때로 React 애플리케이션에서 데이터를 표시하려고 시도할 수 있으며 콘솔에 다음 오류가 표시될 수 있습니다.
Objects are not valid as a React child (found: object with keys ...). If you meant to render a collection of children, use an array instead.

개체 인쇄

다음 코드를 고려하십시오.

function App() {
  const name = { first: "John", last: "Doe" }

  return <div className="App">{name}</div>
}

export default App

반응 애플리케이션에서 다음 코드를 실행하면 브라우저 콘솔에 다음 오류가 표시됩니다.



이는 개체 내부의 값 대신 전체 개체를 인쇄하려고 하기 때문에 발생합니다. 아래와 같이 이름과 성을 별도로 인쇄하여 이 문제를 해결할 수 있습니다.

function App() {
  const name = { first: "John", last: "Doe" }

  return (
    <div className="App">
      {name.first} {name.last}
    </div>
  )
}

export default App

표시 날짜

다음 코드를 사용하여 날짜를 표시하면 동일한 오류가 발생합니다.

function App() {
  const date = new Date()

  return <div className="App">{date}</div>
}

export default App

여기서 date는 객체입니다. 날짜를 문자열 형식으로 받으려면 toLocaleDateString()과 같은 방법을 사용할 수 있습니다.

function App() {
  const date = new Date()

  return <div className="App">{date.toLocaleDateString()}</div>
}

export default App

여분의 중괄호

변수를 인쇄하는 동안 여분의 중괄호를 추가하면 동일한 오류가 발생합니다.

function App() {
  const counter = 10

  return <div className="App">{{ counter }}</div>
}

export default App

추가 중괄호를 사용하면 short-hand notation for object 이 됩니다. 즉, {counter: counter} 로 확장할 수 있습니다. 따라서 객체로 취급됩니다. 추가 중괄호를 제거하여 이 문제를 해결할 수 있습니다.

function App() {
  const counter = 10

  return <div className="App">{counter}</div>
}

export default App

jsx 배열 표시

목록이 있고 아래와 같이 렌더링할 JSX 배열을 만든 경우에도 동일한 문제에 직면하게 됩니다.

function App() {
  const list = ["foo", "bar"]

  const jsxToRender = list.map(item => <li>{item}</li>)

  return { jsxToRender }
}

export default App

반환된 값을 ul 요소 안에 넣거나 중괄호 없이 jsxToRender만 반환하면 이 문제를 해결할 수 있습니다.

function App() {
  const list = ["foo", "bar"]

  const jsxToRender = list.map(item => <li>{item}</li>)

  return <ul>{jsxToRender}</ul>
}

export default App

중괄호 누락

데이터를 표시하는 별도의 기능이 있고 아래와 같이 개체의 값을 보내고 받는 경우 동일한 문제에 직면하게 됩니다.

const Name = (first, last) => {
  return (
    <div>
      {first} {last}
    </div>
  )
}

function App() {
  return (
    <>
      <Name first={"John"} last={"Doe"} />
    </>
  )
}

export default App

아래와 같이 객체 분해를 수행하여 수정할 수 있습니다.

const Name = ({ first, last }) => {
  return (
    <div>
      {first} {last}
    </div>
  )
}

function App() {
  return (
    <>
      <Name first={"John"} last={"Doe"} />
    </>
  )
}

export default App