[JavaScript] 조건부 연산자, AND 연산자, OR 연산자

JSX 내부의 자바스크립트 표현식에서 if문을 사용할 수 없습니다.

그래서 조건문을 사용하기 위해서는
- JSX 밖에서 if문을 사용
- JSX 내에서 { } (표현식) 안에 조건부 연산자를 사용

조건부 연산자는 다음과 같이 사용합니다.

// { 조건 ? 참 : 거짓 }
{ A > B ? "A is win" : "B is win" }

- 앞부분에 조건을 입력합니다.
- ? 뒤에는 참인 경우 실행 될 코드를 입력합니다.
- : 뒤에는 거짓인 경우 실행 될 코드를 입력합니다.

조건부 연산자를 활용하여 flag가 true일 때 "Hello"를 보이게 할 수 있습니다.

import React from "react";

const App = () => {
  const flag = true;
  return <div>{flag ? "Hello!" : null}</div>;
};
export default App;

AND 연산자를 활용하여 동일한 표현이 가능합니다. 

import React from "react";

const App = () => {
  const flag = true;
  return <div>{flag && "Hello!"}</div>;
};
export default App;

(A && B) 의 경우

A, B가 true일 때 B를 반환합니다.
A, B중 하나라도 false인 경우 아무것도 반환하지 않습니다.

 

OR 연산자를 활용하여 값이 undefined인 경우 문구를 보여줄 수 있습니다.

import React from "react";

const App = () => {
  const flag = undefined;
  return <div>{flag || "undefined"}</div>;
};
export default App;

{ A || B } 의 경우
A가 true인 경우 A를 반환
A가 false, B가 true인 경우 B를 반환
A, B가 false인 경우 아무것도 반환하지 않음