내가 작성한 코드 {MyPage}

<Route path="/mypage" element={MyPage} />

에러가 발생한 원인은 React 컴포넌트를 element prop에 직접 할당하는 대신 컴포넌트를 참조했기 때문입니다.

즉, <Route path="/mypage" element={MyPage} /> 이 코드에서 MyPage는 React 컴포넌트를 참조하고 있지만, 실제로는 컴포넌트 인스턴스(즉, JSX 형태)가 필요합니다.

따라서 아래와 같이 수정해야 합니다: {<MyPage />}

<Route path="/mypage" element={<MyPage />} />

React 컴포넌트의 인스턴스?

• React 컴포넌트의 인스턴스는 특정 컴포넌트를 표현하는 JSX 요소를 말합니다.
  (ex) MyPage라는 컴포넌트가 있다면, <MyPage />는 MyPage 컴포넌트의 인스턴스.
• 이는 JavaScript에서 new MyClass()를 통해 클래스의 인스턴스를 생성하는 것과 유사한 개념입니다.

React 컴포넌트를 참조한다?

• React 컴포넌트를 참조하는 것: 해당 컴포넌트를 가리키는 변수나 식별자를 사용하는 것을 말합니다.
  (ex)예를 들어, MyPage라는 식별자는 MyPage 컴포넌트를 참조합니다.

React 컴포넌트를 할당한다?

• 반면에 React 컴포넌트를 할당하는 것은 특정 JSX 요소를 변수나 속성에 설정하는 것.
• 이것은 특정 컴포넌트의 인스턴스를 생성(<MyComponent />)하고 해당 인스턴스를 변수나 속성에 할당하는 것과 같습니다.

아래 코드를 보면 두 개념을 더 잘 이해할 수 있습니다:

const MyComponent = () => <div>Hello World!</div>; // MyComponent는 컴포넌트를 참조합니다.
const instance = <MyComponent />; // instance는 MyComponent의 인스턴스를 할당합니다.

• MyComponent는 React 컴포넌트를 참조하며,
• instance는 MyComponent의 인스턴스를 할당함.
  : 이 때 instance는 실제로 렌더링 될 수 있는 JSX 요소임.

React Component Instance

컴포넌트 인스턴스가 뭐지? 어떤 형태인거지? 이게 너무 궁금했음. 항상 이 형태라고 함.
리액트 컴포넌트 인스턴스의 형태: <component />

• React의 핵심적인 특징이며, JSX는 결국 JavaScript로 변환되어 동작함.

-> 실제로는 <Component />가 React.createElement(Component)로 변환됨.

• 이렇게 생성된 요소(element)는 React의 컴포넌트 인스턴스를 나타내며, 이것이 바로 브라우저에 렌더링되는 DOM 요소를 생성하는 데 사용.

• 따라서 React에서 컴포넌트 인스턴스를 생성하거나 참조할 때는 항상 <Component /> 형태를 사용해야함. React 컴포넌트를 다루는 데 있어서의 불변의 규칙임.