[TIL] 내일배움캠프 React 과정 2023.01.13

Today I Learned

• React Native 팀 프로젝트 마감 및 발표회

 

---

헤더에 로그인, 로그아웃 조건부 렌더링하기

useFocusEffect(
    // 비로그인 상태에서 마이페이지 접근 시 로그인화면으로 이동하고, 뒤로가기 시 무비탭
    useCallback(() => {
      setOptions({
        headerRight: () => {
          return (
            <TouchableOpacity
              style={{ marginRight: 10 }}
              onPress={!authService.currentUser ? Login : ㅣogout}
            >
              <LogoutText style={{ color: "#312070" }}>
                {!authService.currentUser ? "로그인" : "로그아웃"}
              </LogoutText>
            </TouchableOpacity>
          );
        },
      });
    }, [])
  );

firebase authService에서 currentUser를 조회해서 currentUser가 존재하면 "로그아웃"을 보여주고 존재하지 않으면 "로그인"을 보여준다. 그리고 텍스트뿐만 아니라 당연히 onPress했을 때 작동하는 함수도 삼항으로 다르게 설정해 주었다.

 

---

회고

프로젝트 마감날이라 정신없이 코드를 수정해서 뭘 했었는지 기억이 잘 안 난다. ㅎㅎ 이제 매번 EXPO앱을 연결하지 않아도 돼서 시원하기도 하고 네이티브도 나름 재밌었는데 아쉽기도 하다. 이렇게 또 하나의 프로젝트를 마무리했구나! 아쉬운 마음도 분명 있지만 결과물을 보면 또 뿌듯하다.

 

그리고 오늘 최종프로젝트 팀 구성을 어떻게 하는지에 대한 발제가 있었는데 리더/부리더 제도에 갑자기 생각이 너무 많아졌다. 일단 나는 욕심 내서 리더/부리더에 지원할 생각인데 주말 동안 고민을 좀 더 해봐야겠다.