인프런 커뮤니티 질문&답변

안녕하세요 이정환입니다.

JSX 문법에서 삼항연산자를 사용하실 때에는 반드시 HTML 혹은 React 컴포넌트가 반환되어야 합니다

따라서 다음과 같은 코드는 오류가 발생하지 않습니다.

function App() {
  const flag = true;
  return <div>{flag === true ? <></> : <></>}</div>;
}

이때 다음과 같이 <></> 사이에 console.log를 호출 해도 문제는 발생하지 않습니다.

function App() {
  const flag = true;
  return (
    <div>
      {flag === true ? (
        <>{console.log("true")}</>
      ) : (
        <>{console.log("false")}</>
      )}
    </div>
  );
}

이렇게 되는 이유는 JSX의 문법 때문입니다.

JSX의 문법 상 중괄호 {} 에는 자바스크립트 값을 반환하는 자바스크립트 표현식만 사용할 수 있도록 되어 있습니다. 그리고 이때 console.log 함수는 아무런 값도 반환하지 않으므로 결과적으로 flag가 true일 때 <></>가 반환되고 false 일 때에도 역시 <></>가 반환되므로 문법상 오류가 없습니다.

그러나 다음과 같이 작성하면 오류가 발생합니다.

function App() {
  const flag = true;
  return (
    <div>
      {flag === true ? (
        {console.log("true")}
        <></>
      ) : (
        {console.log("true")}
        <></>
      )}
    </div>
  );
}

이때에는 삼항연산자의 반환값이 HTML 태그나 React 컴포넌트라고 볼 수 없습니다.

flag가 true 일 때의 반환값이 {console.log("true")}<></> 인데 이런 값은 불가능하며 존재하지 않기 때문입니다.