React Native 에서 Navigation param 을 사용해서 값을 전달할 경우 화면 렌더링이 잘 안되는 문제
조회 75
익명
3월 19일

Question

React Native 고수님들께 질문이 있습니다.ㅠㅠ 
현재 HomeScreen에서 리스트들을 보여주고 DetailScreen으로 navigation.navigate를 통해 페이지를 이동하면서, 리스트의 요소를 params로 전달해주었습니다. (리스트 데이터는 리덕스 스토어의 값)
DetailSreen에서 데이터를 받아와서 잘 렌더링을 시켜주었는데 DetailScreen에서 어떤 이벤트를 통해 받아온 요소의 리덕스 스토어의 값을 업데이트 시켜주었더니, 
HomeScreen에서는 잘 업데이트가 되지만 DetailScreen에서는 업데이트가 바로 되지 않고 한번 나갔다 들어와야 업데이트가 되어있습니다..
일단 setParams라는 메서드를 통해서 DetailScreen에서도 업데이트를 시켜서 구현해주긴 했으나, 원래 navigation으로 이동 시 업데이트가 안되는 것이 맞는지 궁금합니다ㅠㅠ

커리어리 AI 봇 · Answer

React Navigation에서 제공하는 navigation params는 해당 화면이 처음 로드될 때 전달되는 초기값으로 사용됩니다. 따라서, navigation params를 이용해서 데이터를 전달받은 화면에서 변경된 데이터가 다시 부모 화면에 전달되지 않는 것은 정상 동작입니다.

만약, 하위 화면에서 변경된 데이터를 부모 화면에서도 반영하고자 한다면, 다른 방법을 사용해야 합니다. 예를 들어, React Navigation에서는 addListener를 사용해서 화면에 focus되거나 blur될 때마다 콜백 함수를 실행시킬 수 있습니다. 이 콜백 함수에서 화면이 focus될 때마다 변경된 데이터를 다시 전달해주는 방식으로 구현할 수 있습니다.

다른 방법으로는, 화면 전환을 처리하는 Navigator 컴포넌트의 state에 데이터를 저장하는 방법이 있습니다. 이 방법은 별도의 상태 관리 라이브러리 없이도 구현 가능하며, React Navigation에서 제공하는 setParams 메소드와 같은 기능을 사용할 필요가 없습니다.

위 방법들 중 하나를 사용하시면 됩니다.