react-navigation 의 Screen 에 props를 전달하는 방법

1.

react-navigation 을 사용할때, 종종 

<Drawer.Screen name={`Home`} component={Home}/>

이런 .Screen component에 props를 전달해야하는 경우가 생긴다. 이런경우에는 component에 고차 컴포넌트 형식으로 props를 포함한 컴포넌트를 전달해주면 된다. 아래와 같이 말이다.

<Drawer.Screen name={`Home`} component={({navigation})=><Home name={name} setName={setName} navigation={navigation}/>}/>

2.

하지만, expo에서는 warning이 발생한다. 

이와 같이, component의 prop에 inline function을 전달했다는 오류이다. 말 그대로 해석하자면, Inline function을 전달하는 것은, component state가 re-render과정에서 소실될 수 있고, 또한 다시 생성되는 그런 비효율적인 현상이 발생할 수 있다는 경고 이다. 따라서 아래와 같이 코드를 수정하면 이를 해결할 수 있다.

<Drawer.Screen name={`Home`} children={({navigation})=><Home name={name} setName={setName} navigation={navigation}/>}/>

3.

1번의 맨 처음에 썼던 코드는 아래와 같았다.

<Drawer.Screen name={`Home`} component={Home}/>

이 경우 Home 컴포넌트 에서는 Props에서 바로 navigation을 사용할 수 있었다. 하지만 props를 전달하기 위해 고차 컴포넌트 형식으로 전환하면 navigation이 자동으로 props로 전달되지 않는 문제가 생긴다. 따라서 아래와 같이 children 으로 들어가는 inline function의 parameter로 navigation을 주고 이걸 다시 props로 만들어 컴포넌트로 넘겨주어야 한다.

<Drawer.Screen name={`Home`} children={({navigation})=><Home name={name} setName={setName} navigation={navigation}/>}/>