react 삼항연산자

김선주·2022년 1월 14일
0

로그인/회원가입 페이지를 삼항연산자를 이용하여 전환하는 페이지를 만들었는데 연결하는 로직작성이 힘들었다. 직접 작성한 건 아니지만 로직은 질문으로 물어보고 넣어봄 - 작동은 한다.

const isLogin = localStorage.getItem('token');

//isLogin이 localStorage가 가진 getItem의 토큰을 이용하여 작동함

return (
    <Container>
      <AuthContainer>
        <img src="/images/logo.png" alt="로고" />
        <TextBox>
          <Title>{isLogin ? 'Welcome!' : '반갑습니다!'}</Title>
          <SubTitle>여행의 모든 것, 마이코드트립</SubTitle>
        </TextBox>
        <KakaoButton
        // onClick={KakaoLogin}
        >
          <BtnText>
            {isLogin ? '카카오로 계속하기' : '카카오로 바로시작'}
          </BtnText>
        </KakaoButton>
        <Social>
          <Socialtext>페이스북</Socialtext>
          <Socialtext>네이버</Socialtext>
          <Socialtext>이메일</Socialtext>
        </Social>

        <YetSignIn>
          {isLogin ? '아직 회원이 아니신가요? ' : '이미 아이디가 있으신가요?'}
        </YetSignIn>
        <AuthQuest>{isLogin ? '회원가입' : '로그인'}</AuthQuest>
      </AuthContainer>
    </Container>
  );
}
profile
김선주입니다.

0개의 댓글