[React] JSX 안에서 중첩 삼 항 연산자 사용하기

리액트의 return문에서 조건문을 사용하려면 JSX 문법을 사용해야 한다.
이때 삼 항 연산자를 많이 사용하는데, 중첩으로 사용할 때 헷갈려서 기록을 남긴다.

 

사용자 로그인 여부에 따라 보여주는 내용이 다르고, 
로그인 한 사용자도 레벨에 따라 다른 내용을 보여주는 기능을 구현하기 위해
삼 항 연산자를 중첩해서 사용했다.

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useRecoilValue } from 'recoil';
import styled from 'styled-components';
import { LoginState } from '../../states/LoginState';

function LoginPermission() {
  const navigate = useNavigate();
  const [userLevel, setUserLevel] = useState(-1);
  const isLoggedIn = useRecoilValue(LoginState);

  return (
    <LoginWrapper>
      {isLoggedIn
        ? (
          userLevel === 0 ?
            <>
              <div>당신의 레벨은 {userLevel}입니다!</div>
              <button onClick={() => navigate('/signup/detail')}>취향 등록하러 가기</button>
            </>
            : <>
              <div>당신의 레벨은 {userLevel}입니다!</div>
              <button onClick={() => navigate('/mypage')}>마이 페이지</button>
            </>
        )
        : (
          <>
            <div>로그인을 해주세요 :0</div>
            <button onClick={() => navigate('/signin')}>로그인</button>
          </>
        )
      }
    </LoginWrapper>
  );
}

export default LoginPermission;

 

로그인 하지 않았을 때

로그인 했지만 정보를 등록하지 않았을 때

로그인 & 정보 등록을 마쳤을 때

여러 조건을 비교하고 싶은데 그 사이에 공통점이 있다면
삼 항 연산자를 중첩으로 사용하는 것도 괜찮은 방법인 것 같다.