React Router v6

• React Router v6에서는 <Routes>의 자식 컴포넌트로 <Route>를 사용함.
• 각 <Route>에는 path와 element prop이 필요함.
• 여기서 element prop에는 렌더링하고자 하는 컴포넌트의 인스턴스를 할당해야함.

React rendering을 위해 어떻게 해야할까?

React 기본 동작 원리:

React는 JSX 문법을 사용해 컴포넌트를 렌더링함.

React는 인스턴스를 통해 어떤 컴포넌트를 렌더링할지 결정함.

• 이는 React 전반에 걸친 이야기입니다. 컴포넌트의 참조(reference)와 인스턴스(instance)를 혼동하면, React는 어떤 컴포넌트를 렌더링해야 할지 혼란스러워집니다.
• 이를 풀어서 설명해보면, React는 JSX 문법을 사용해 컴포넌트를 렌더링합니다. 이 JSX는 와 같은 형태로 컴포넌트의 인스턴스를 생성합니다. 그리고 React는 이 인스턴스를 통해 어떤 컴포넌트를 렌더링할지 결정합니다.
• 그런데 만약 컴포넌트의 참조만 전달된다면, React는 이를 인스턴스로 인식하지 못하고 렌더링 과정에서 문제가 발생합니다. 이는 Router에서뿐만 아니라 모든 React의 상황에서 해당되는 문제입니다.
• 따라서 컴포넌트를 렌더링하려면 항상 컴포넌트의 인스턴스를 생성해주어야 하며, 이를 위해 <Component />와 같은 형태를 사용해야 합니다. 이는 React의 기본적인 동작 원리이며, 이를 이해하는 것은 React를 효과적으로 사용하는 데 중요한 부분입니다.

1. 컴포넌트 참조 시: JSX로 감싸지 않고 직접 컴포넌트를 넘기게 되는 것 ex. {component}

• 컴포넌트를 참조하면 (즉, JSX로 감싸지 않고 직접 컴포넌트를 넘기면), React Router는 해당 컴포넌트의 인스턴스를 생성하는 방법을 알 수 없음
• 이로 인해 라우터가 해당 경로로 이동했을 때 어떤 컴포넌트를 렌더링해야 하는지를 알 수 없음

2. 컴포넌트 할당 시: 컴포넌트 인스턴스 생성하는 JSX문법을 사용한 것 ex. {<component />}

• 따라서, element prop에는 컴포넌트를 참조하는 것이 아니라, 해당 컴포넌트의 인스턴스를 직접 생성하여 할당해야 합니다.
• 이렇게 하면 React Router는 element prop에서 직접 해당 컴포넌트의 인스턴스를 가져와 렌더링할 수 있습니다.

만약 element prop이 아닌 component prop을 쓰게 되면 어떤 문제가 발생할까?

• component prop을 사용하면
  : 라우트가 변경될 때마다 새로운 컴포넌트 인스턴스가 생성되므로, 컴포넌트의 상태가 보존되지 않았습니다. 또한, 이 방식은 라우트에 따라 동적으로 다른 컴포넌트를 렌더링하는 것을 어렵게 만들었습니다

• element prop은 렌더링 문제를 어떻게 해결해주는 걸까?
  : element prop을 사용하면 컴포넌트 인스턴스가 한 번만 생성되므로, 라우트가 변경되어도 컴포넌트의 상태가 유지됩니다. 또한, element prop을 사용하면 라우트에 따라 다른 컴포넌트를 쉽게 렌더링할 수 있습니다.