react refecth react navtive 리렌더링

agnusdei·2024년 9월 5일

const CustomerLayout = () => {
  const navigation = useNavigation<any>();
  const [refresh, setRefresh] = useState(false); // 상태 추가
  const tabs: TopTabType[] = Object.entries(MatchingStatus).map(([key, value]) => {
    return {
      label: value,
      name: key,
      component: (props) => <CustomerScreen {...props} name={key} />,
    };
  });

  const reRender = () => {
    setRefresh(!refresh); // 상태 변경
  };

  useEffect(() => {}, [reRender]);

  return (
    <View className="h-full gap-4 p-4 bg-white">
      <Div className="flex-row items-center justify-between pb-4">
        <H1>고객 관리</H1>
        <Button
          onPress={() => {
            navigation.navigate('UserFormByTrainer', {
              onChange: () => {
                alert('발동');
                reRender();
              },
            });
          }}
          icon="solar:pen-2-bold-duotone"
        >
          고객 등록
        </Button>
      </Div>
      <TopTabs tabs={tabs} />
    </View>
  );
};

export default CustomerLayout;
  • useState 와 useEffect 반드시 같이 사용

0개의 댓글