navigate params로 함수 전달하기

리액트 네비게이션에서 param로 성격을 세팅하는 setState 함수를 전달하려했는데, 직렬화 가능한 값만 전달 가능하다고 한다. 결국 함수는 전달 못한다는 거다. 흑 그럼 어떻게 전달하지

 

위에서 아래로 내릴때는 props로 뭐든 전달하면 되는데 아래에서 위로 올릴때는 위에서 setState 함수를 props로 전달한 값을 활용하는 법 밖에 없다. 그런데 네비게이션으로 화면을 전환했을때 전환된 화면으로 무언가를 전달하려고 할때 navigate params argument 말고 뭐가 있을까..

---

리액트 라이브러리를 사용해서 화면을 전환할때 함수를 전달하려면, 함수를 파라미터로 전달하는 것이 아니라 객체에 포함시켜서 전달하면 된다고 한다.

예를 들어서 

const handlePress = () => {
  navigation.navigate('Another', {
    handleAnotherPress: () => console.log('Handling press in another screen'),
  });
};

이렇게 보내면 수신자 화면에서는 props.route.params.handleAnotherPress 로 전달된 함수를 사용할 수 있다.

 

근데 문제가 하나 있다. 어쨋든 함수가 전달이 되긴하는데 경고 메세지가 뜬다.

'Non-serializable values were found in the navigation state', 이런 경고메세지가 뜨는데 작동은 된다.. 

왤까. 왜 직렬화 불가능한 값은 못쓰게 하는걸까

저 경고메세지를 일단은 다음과 같은 코드로 일단은 가렸다.

LogBox.ignoreLogs([

    'Non-serializable values were found in the navigation state',

  ]);

 

 

그래서 chatGPT 한테 함 물어봤다. 근데 요즘 chatGPT가 많이 느려졌다. 

확실히 유저가 엄청 많아지긴 했나보다.

 

Q. 왜 리액트 네비게이션에서는 직렬화 불가능한 값을 파라미터로 전달을 못하게 하는거야? 작동은 되는데?

A.

React Navigation에서는 직렬화 불가능한 값(serializable values)을 파라미터로 전달하는 것을 금지하고 있는 이유는 앱의 상태가 제대로 유지되지 않을 수 있기 때문입니다.

 

React Navigation은 화면 전환과 관련된 정보를 URL 경로와 파라미터로 관리합니다. URL 경로와 파라미터는 모두 직렬화 가능한 값이어야 하며, 직렬화 불가능한 값을 전달하면 앱의 상태를 제대로 유지하지 못할 수 있습니다.

 

직렬화 불가능한 값으로는 함수, 실행 중인 Promise 등이 있습니다. 이러한 값들을 파라미터로 전달하면 URL이 제대로 생성되지 않을 수 있어서 앱의 상태를 제대로 유지하지 못할 수 있습니다.

직렬화 가능한 값으로는 숫자, 문자열, 불리언, 배열, 객체 등이 있습니다. 이러한 값들은 URL경로와 파라미터로 전달될 때 제대로 유지됩니다. 

 

예를 들어서 아래와 같이 화면 A에서 화면 B로 파라미터를 전달할 수 있습니다.

navigation.navigate('ScreenB',{name:'John', age:30});

 

---

참고

직렬화(Serialization)은 프로그래밍에서 데이터 구조나 객체를 바이트 스트림이나 문자열 형태로 변환하는 것을 말합니다. 직렬화된 데이터는 나중에 다시 원래의 객체 형태로 복원할 수 있습니다.

반면, 비직렬화 값(Non-serializable value)은 직렬화가 불가능한 데이터 형식입니다. 이러한 값은 주로 객체, 함수, 제네릭 타입 등입니다. 이러한 값은 직렬화하지 않고 전달할 수 없기 때문에, 네비게이션에서나 다른 저장 공간에서 저장하려 할 때 문제가 발생할 수 있습니다.