인프런 커뮤니티 질문&답변

강사님~ SignUp.tsx에서 로직부분에 질문이 있습니다.

 try {
      setLoading(true);
      const response = await axios.post(
        `${Config.API_URL}/user`, 
        { email, name, password } 
      );
      Alert.alert('알림', '회원가입이 완료되었습니다.');
      navigation.navigate('SignIn');
    } catch (error) {
      const errorResponse = (error as AxiosError).response; 
      if (errorResponse) {
        Alert.alert('알림', errorResponse.data.message); 
      }
    } finally {
      setLoading(false);
    }
  }, [navigation, loading, email, name, password]);

 

위 코드를 실행했더니 회원가입이 될때

이런 경고가 나왔습니다. 언마운트된 컴포넌트(SignUP)의 state를 바꿀 수 없다는 얘기인데, 애뮬레이터에서 경고창 눌러보니 finally { setLoading(false); } 이 부분이 문제더라구요.

그래서 finally는 비워두고 catch절에만 setLoading(false); 을 두고 실행했더니 잘 작동합니다.

 

질문 두가지입니다.

1. 회원가입이 완료되면 화면이 바뀌니 제가 한대로 catch절에만(실패했을때) setLoading(false);를 넣는게 맞는 방법일까요?

2. 1번대로 하든 기존의 로직대로 하든, 회원가입이 완료되면 loading state는 true로 남아있는거라고 보면 될까요?(1번대로 하면 loading을 바꾸지 않고 화면이동, 기존의 로직대로 하면 경고 발생)

Stack Navigator을 쓰면 '회원가입'과 '로그인' 화면을 쌓아두고 호출하는 것을 위로 보여주는 것으로 알고 있습니다. 강사님께서 컴포넌트의 state는 유지될 수도 있고 안될수도 있다고 하셨는데 이것과 관련하여 2번이 조금 헷갈립니다..!

 

도움 부탁드립니다..!