[React Native] 화면 간 데이터 이동하기 (Passing data between screen)

안녕하세요 Foma 입니다!

 

오늘은 저번 시간에 다뤘던 List 화면 에 이어서 특정 컴포넌트를 클릭 했을 때 다음 화면으로 이동하고, 데이터를 함께 전달하는 방법에 대해서 다뤄보겠습니다.

 

바로 시작할게요~

 

언어는 TypeScript, 환경은 Expo로 진행 하겠습니다!

---

Person List

 

Person 데이터를 가진 컴포넌트를 리스트로 만들어 줍니다.

 

(리스트 화면은 여기 를 참고해 주세요!)

 

Pressable 컴포넌트를 눌렀을 떄 PersonDetatil 화면으로 이동하게 만들어 줍니다.

 

(Navigation에 대한 것은 여기를 여기 참고해 주세요)

 

그리고 함꼐 보낼 데이터를 { 이름1: 보낼 데이터1, 이름2: 보낼 데이터2...} 와 같은 형식으로 작성해 줍니다. 

 

PersonListScreen.tsx

 

export default function PersonListScreen({
  navigation,
}: NativeStackHeaderProps) {
  useEffect(() => {
    console.log("Rendering Home Screen");
  }, []);

  return (
    <View style={styles.container}>
      <FlatList
        data={data as Array<Person>}
        renderItem={({ item }: { item: Person }) => {
          return (
            <Pressable
              onPress={() =>
                navigation.navigate("PersonDetail", {
                  name: item.name,
                  age: item.age,
                  gender: item.gender,
                })
              }
            >
              <PersonCell item={item} />
            </Pressable>
          );
        }}
        keyExtractor={(item) => item.name}
      />
    </View>
  );
}

---

Person Detail

 

가장 먼저 파라미터로 받아올(PersonListScreen에서 보낸 데이터들) 것들을 type으로 만들어 줍니다.

 

PersonDetailScreen.tsx

 

type DetailParams = {
  route: {
    params: {
      name: string;
      age: string;
      gender: string;
    };
  };
};

 

그 다음 위에서 명시해 놓은 파라미터를 이용해 Text에 나타내 줍니다.

 

type Navigation = NativeStackHeaderProps & DetailParams;

export default function PersonDetailScreen({ route }: Navigation) {
  return (
    <View style={styles.container}>
      <Text style={styles.header}>Name: {route.params.name}</Text>
      <Text style={styles.header}>Age: {route.params.age}</Text>
      <Text style={styles.header}>Gender: {route.params.gender}</Text>
    </View>
  );
}

---

실행 화면

 

Person List 화면에서 누른 컴포넌트 데이터 값이 Person Detail 화면으로 이동하여 보여지는 것을 볼 수 있습니다.