[React] JSX 문법 파악하기(삼항연산자 & 옵셔널체이닝)

JSX는 JavaScript를 확장한 문법으로 UI가 어떻게 생겨야 하는지 설명하는 역할을 담당하고 있습니다. 쉽게 말해 JSX는 React의 엘리먼트를 생성하는데요.

const element = <h1>Hello, world!</h1>;

위처럼 HTML 코드를 직접 할당해서 사용할 수도 있습니다.

또한, JSX의 다른 중요한 특징은 {}의 사용이 굉장히 범용적이라는 것인데요.

JSX의 중괄호 안에는 유효한 모든 JavaScript 표현식을 넣을 수 있습니다. 
예를 들어 2 + 2, user.firstName 또는 formatName(user) 등은 모두 유효한 JavaScript 표현식입니다.

(출처) -https://ko.reactjs.org/docs/introducing-jsx.html

하지만, 이런 JSX 안에서 지켜야만 하는 규칙들이 있습니다.

반드시 부모 요소 하나로만 감싸여져 있어야 한다.

function App() {
  return (
    <>
      <h1>Hello!</h1>
      <h2>world!</h2>
    </>
  )
}

즉, 위처럼 <>과 </>로 쌓여 있어야 한다. 여기서 반드시 <>와 </>일 필요는 없지만 항상 부모 요소가 존재해야한다.

JSX 내부의 javaScript 표현식에서 if문을 사용할 수 없다.

{modal ? <S.Modal>{allData}</S.Modal> : <div></div>}

그래서, 조건에 따라 다른 내용을 보여줘야할 때에는 JSX 밖에서 if를 통해 값을 설정하거나, {}안에서 삼항 연산자를 사용하면 된다.

삼항 연산자

&& 연산자의 경우

value1 && value2

위의 상황에서 value1이 false면 항상 value1 && value2의 값이 false가 되고
value1이 true면 항상 value1 && value2는 value2 값이 된다.

삼항 연산자

|| 연산자의 경우

value1 && value2

위의 상황에서 value1이 false면 항상 value1 && value2의 값은 value2 값이 되고,
value1이 true면 항상 value1 && value2는 true가 된다.

---

옵셔널체이닝

삼항연산자를 사용할 때에도 옵셔널체이닝을 사용할 수 있습니다. 다음을 살펴보죠.

{data?.fetchBoard.title}

graphQL을 통해 데이터를 가져와 JSX문법으로 표현할 때에 위처럼 사용할 수 있습니다. 위의 코드는 다음의 코드와 동일한 기능을 합니다.

{data? data.fetchBoard.title : ""}

이러한 기능을 옵셔널체이닝이라고 합니다.