React Native | Navigation

Navigation

라이브러리 🔎

React Native에서 페이지간에 이동을 하기 위해서는 네비게이션 라이브러리가 필요해요. 물론 만들 수도 있지만, 매우 감사하게도 라이브러리가 존재해요. 저는 아직 주니어라... 만드는 방법은 모르겠습니다. 아래 링크에 들어가면 굉장히 친천할게 설치하는 방법과 사용방법이 설명되어 있습니다, React 공식문서보다 더 잘되어 있는 것 같은 느낌...
React Navigation

페이지간에 데이터 이동 🧐

설치 하고 사용하는 방법은 사실, 라이브러리 설명만 봐도 충분합니다. 하지만, 데이터 이동에 대해서는 조금 개념 이해가 필요할 듯 하여, 이렇게 정리를 합니다.
네비게이션 라이브러리를 사용하게 되면, navigation, route 등을 props로 내려받을 수 있어요. 네비게이션 라이브러리가 미리 만들어둔 것을 저희가 사용하는 것이지요.

예를 들어서 Home 페이지에서 User 페이지로 데이터를 이동하려고 한다고 가정을 해볼게요.

먼져. Home에서 데이터를 보내기 때문에, Home 페이지 내에 보낼 데이터에 대해서 써주어야 해요.

<Button 
	title: 'Go to User Page"
    	onPress = {() => {
        navigation.navigate('User', {
        idX:1,
        userName: 'MOONJOO'})}}
/>
        

Button 컴포넌트를 사용하려면, 꼭 title을 써주어야 합니다~ onPress에 콜백으로 User페이지로 보낼것들을 써주어야 하는데, 이 때, navigation 부분이 보일 거에요. navigation은 라이브러리에서 가져온 props?? 이구요. navigate는 그 안에 있는 메서드에요. 그리고 안에 인자를 2개 넣어주었는데, 앞에 User는 제가 Stack을 사용해서 name을 'User'라고 명명? 해주었어요. 그래서 다시 설명을 하면, User페이지로 idx, userName을 보내겠다는 의미에요. Stack은 라이브러리인데, 페이지간에 이동을 하도록 만들고 싶으면, 있어야 해요... 라우트 같은거? 라고 생각하시면 될거에요.

그리고 User페이지에서 console.log(navigation)을 찍으면, 관련 정보와 메서드가 찍힐 거에요.
그리고 사용하는 곳에 아래와 같은 방법으로 사용을 해주면 된답니다.

const idx = route.params ? route.params.idx : null;
{JSON.stringfy(idx)} 

왜 이의 코드처럼 사용을 했냐면, 맨 처음 설정한 페이지가 Home이고 그 페이지에서 User로 넘어가면 데이터가 넘어갈거에요. 근데, 시작 페이지가 User이고 다음페이지가 Home이면 null 값이 뜰거에요. 데이터가 단방향으로 간답니다... ㅎㅎㅎ 그래서 이럴 때는 initialParams를 사용해서 초기값을 세팅해준답니다.

마무리 😁

React Native를 하려면, 정말로 React에 대한 이해가 필요합니다. React를 꼭 먼져 공부하세요~