삼항연산자

목차

 

 

어우.. 저녁을 너무 많이먹어버렸따...

삼항 연산자

삼항 연산자는 if else를 다르게 표현한 코드이다.

으음.. 예로 들어

if( toggle == True)
  console.log("True!");
else
  console.log("False!");

toggle이 참이면 True를 출력하고

거짓이면 False를 출력하는 이 if문은

(toggle == true) ? (
  console.log("True!");
) : (
  console.log("False!");
)

이렇게 삼항 연산자로 변환 가능하다.

코드

import {useState} from 'react';

export default  function App () {
  const [toggle, setToggle] = useState(false);

  function handleOnClick(){
    setToggle(!toggle);
  }

  return (
    <>
      <button onClick={handleOnClick}>On/Off</button>
      {toggle ?(
        <h1>Toggle On</h1>
      ):(
        <h1>Toggle Off</h1>
      )}
    </>
  );
};

풀이

삼항 연산자는 render (태그 반환) 문에서 자주 쓰인다.

if문은 못쓰는데 삼항 연산자는 가능하기 때문이다.

can't use if/else inside react render method

import {useState} from 'react';

export default  function App () {
  const [toggle, setToggle] = useState(false);

  function handleOnClick(){
    setToggle(!toggle);
  }

  return (
    <>
      <button onClick={handleOnClick}>On/Off</button>
      {toggle ?(
        <h1>Toggle On</h1>
      ):(
        <h1>Toggle Off</h1>
      )}
    </>
  );
};

해당 코드는

toggle이 True이면 Toggle On이 랜더링 되게,

toggle이 False이면 Toggle Off가 랜더링 되게

삼항 연산자로 구성했다.

 

지금은 그냥 이해하기 쉽게 저렇게 해놨는데,

데이터 로딩 결과에 따라 다른 화면을 보이게 하는데도 자주 쓰인다.

끝