리액트 네이티브 Stack.Screen 컴포넌트에 props를 전달하는 방법

Question

안녕하세요, 리액트 네이티브 Stack.Screen에 들어가는 컴포넌트로 props를 넣어야하는데 방법을 몰라서 고민끝에 질문 올립니다. react-native/stack 라이브러리 사용중이고 StackNavigator를 사용하고 있습니다. 코드는 이런식입니다. 위와 같이 Stack.Screen 컴포넌트에 MyScreen을 전달하는데 MyScreen에 props를 넘겨주어야 합니다.. 어떻게 해결할 수 있을까요?

Answer

<Stack.Screen
        name={ScreenNames.MyScreen}
        component={()=>MyScreen(props)}
/>

export const HomeScreen = ({props}) => ...

요런식으로 props를 받으면 되지않을까요

권민수 · Answer

react-navigation 쓰고계신거 맞나요? Stack Navigator에서 직접 추가적인 prop을 주시려면, 문서(https://reactnavigation.org/docs/screen#children)에 나와있는 것 처럼 `component` prop을 활용하는 것이 아니라 `children`을 활용해주시면 될 것 같습니다. ``` <Stack.Navigator screenOptions={screenOptions}> <Stack.Screen name={ScreenNames.MyScreen}> {(props) => <MyScreen {...props} hello="world" />} </Stack.Screen> </Stack.Navigator> ``` 단, 문서에도 나와있듯이 이 방법을 사용하면 react-navigation이 알아서 잘 해주던 최적화 효과가 사라지므로, 성능 문제를 피하기 위해서 React.memo나 React.PureComponent를 써야할수도 있습니다.