삼항연산자

condition ? exprIfTrue : exprIfFalse

삼항 조건 연산자는 3개의 피연산자를 가질 수 있는 유일한 연산자이다.
if문을 한 줄로 축약한 형태이며 ? 와 : 을 이용해 if else문과 같은 효과를 낼 수 있다.

condition && exprIfTure

만약 false에 해당하는 값이 없어도 된다면 && 연산자를 활용해 사용할 수 있다

또한 삼항연산자를 여러번 중첩해서 사용할 수도 있다.

조건부 렌더링

JSX에서 삼항연산자를 활용해 조건부 렌더링을 할 수 있다.

class 이름을 조건에 따라 바꿔줘야할 때나
map 매서드를 통해 원하는 데이터를 가져와야 할 때,
JSX에서는 if문 대신 삼항연산자를 활용해 조건부 렌더링을 할 수 있다.

function Login() {
  const [id, setId] = useState('');
  const [pw, setPw] = useState('');
  const [button, setButton] = useState(false);
  
  const handleIdInput = (e) => {
    setId(e.target.value);
    id.includes('@') && pw.length >= 5 ? setButton(true) : setButton(false); 
    }; // &&와 ?, :를 중첩해서 사용한 예시
  
  return (
    <>
      <button 
        className={button === true ? 'btnAble' : 'btnUnable'} 
        type='button' 
        onClick={goToList}
        >
        로그인
      </button>
    </>
  )
}

조건에 따라 class 이름을 바꿔줄 경우

function List() {
  const [coffees, setCoffees] = useState([]);

  useEffect(() => {
    fetch('http://localhost:3000/data/mockdata.json')
      .then((res) => res.json())
      .then((data) => {
        setCoffees(data);
      });
  }, []);
  
  return (
    <>
      <div className='itemList'>
        {coffees[0] && coffees[0].coldBrewCoffee.map((coffee) => 
        <CoffeeCard coffee={coffee} key={coffee.id} />)} 
      </div>
    </>
  )
}

map 매서드를 활용해 mock data에서 원하는 데이터를 가져올 때

&& 연산자 주의사항

&&가 정말 편하지만 주의해서 사용해야할 상황이 있다.
변수가 0, null, undefined 같이 falsy한 값이라면 false로 간주해 출력되지 않는경우가 생기기 때문이다.

이를 방지하기 위해선

{ id !== null && <div>{ id }님 환영합니다</div> }

먼저 조건으로 걸어준 뒤에 사용하면 된다.