[React] Route 태그의 component/render 값을 지정할 때의 유의사항

Routing을 위해 component에 컴포넌트를 집어넣을 때, 보통은 아랫쪽처럼 하지만

뭔갈 더 집어넣어서 라우팅하기 위해 위와 같은 방법으로 컴포넌트를 만든 후, 리턴하게끔 해서 사용했었다.

 

그런데, 위의 방법은 문제가 있다.

 

아래쪽 방법으로 사용하면, 이 컴포넌트의 부모 컴포넌트가 업데이트되어도 Lol쪽은 언마운트되지 않지만,

 

위쪽 방법으로 사용하면 기존에 있던 <GameList/>와 새로 리턴되는 <GameList/>를 다른 인스턴스로 판단하여,

기존의 <GameList/>를 언마운트하고, 새로운 <GameList/>를 마운트한다.

 

간단히 말해서, 부모 컴포넌트가 업데이트 될 때마다 라우트의 컴포넌트를 새로 만든다는 뜻이다.

 

만약 위와 같은 방법을 사용한다면, 해당 컴포넌트의 업데이트 관련 라이프사이클을 만져주는 식으로

의도하지 않는 언마운트/마운트를 막아주어야 한다.

 

안그러면

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application

를 미친듯이 볼 수 있다.

 

당연히 기존의 컴포넌트는 언마운트되었으니, 언마운트된 컴포넌트에서 this.setState를 시도하면 아무런 변화도 발생하지 않는다.

 

==========================

 

더 간단한 해결 방법으로는

위와 같이 컴포넌트를 리턴하는 함수를 사용할 떄에는

component= {...} 대신 render= {...}를 사용하면 해당 문제는 발생하지 않는다

 

컴포넌트 자체를 전달할 때는

<Route ... component={SomeComponent}/>

처럼 component props를 이용하고

 

컴포넌트를 리턴하는 식으로 지정할 때는

<Route ... render={(props)=>{
  //some codes...
  return <SomeComponent {...props}/>;
}}/>

처럼 render props를 이용한다.