Uncaught Error: 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.

children prop에 대해 공부하며 코드를 치던 중, 이런 에러가 나왔다.

Uncaught Error: 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.

에러 메세지에 나온 걸 읽어보면 리액트 차일드가 object면 valid 하지 않다고 나와있다.
그래서 내 코드를 살펴보니

function StepMessage(step, children) {
  return (
    <div className="message">
      <h3> Step {step}</h3>
      {children}
    </div>
  );
}

이 코드를 보면 prop부분을 props.step props.children 이라고 써주던가 아니면 destructuring해야 하는데 destructuring을 까먹고 안한 것이었다. 이럴 때는 저런 에러가 나오는구나 하고 알고 있으면 다음에 혹시 까먹었을 때 쉽게 해결할 수 있을 거라고 생각한다. 처음에는 다 올바르게 쓴 것 같은데 뭐가 문제인건지 에러 뜨니까 당황했었다.