[React] 삼항연산자(Ternary Operation)

JSX 내부의 자바스크립트 표현식에서 if 문을 사용할 수는 없다.
그러므로 조건에 따라 다른 내용을 렌더링해야 할때는 JSX 밖에서 if 문을 사용하여 사전에 값을 설정하거나, { } 안에서 조건부 연산자인 삼항연산자를 사용한다. 이번 글에서는 삼항연산자를 사용하는 방법을 알아보자!

삼항 연산자는 조건이 참이면 첫 번째 값이 반환되고, 그렇지 않으면 두 번째 값이 반환된다.
이를 사용해 특정 조건이 충족될 때 UI를 렌더링하거나 렌더링하지 않도록 할 수 있다.

{isLogin ? (
  <p>로그인 되었습니다</p>
) : null}

여기서 isLogin은 조건으로, 참이면 <p>로그인 되었습니다</p>가 렌더링되고, 거짓이면 null이 반환된다.

const isLogin = true;
const userName = 'Mini';
cost message = isLogin ? `안녕하세요, ${userName}님` : `로그인이 필요합니다!`;

return (
 <div>
    <p>
      {message}
    </p>
 </div>
)

변수를 포함한 문자열을 출력하는 것도 가능하다.
이때 isLogin이 참이므로, message 변수는 userName이 조합된 문자열이 된다.

출처 : https://velog.io/@zwon111/react-%EC%A1%B0%EA%B1%B4%EB%B6%80-%EC%97%B0%EC%82%B0%EC%9E%90%EC%82%BC%ED%95%AD%EC%97%B0%EC%82%B0%EC%9E%90, ChatGPT