JSX 문법

최종 수정 : 24.06.01

JSX란?

자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼다. 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

 

JSX를 사용하면 매우 편하게 UI를 렌더링할 수 있다.

 

HTML과 비슷하지만 완전히 똑같지는 않다. 코드로 보면 XML 형식이지만 실제로는 자바스크립트 객체이며, 용도도 다르고 문법도 조금씩 차이가 난다.

 

# JSX의 장점

■ 보기 쉽고 익숙하다

• JSX를 사용하는 주된 이유
• HTML 코드를 작성하는 것과 비슷하여, 가독성이 높고 작성하기도 쉽다.

■ 더욱 높은 활용도

JSX에서는 div나 span 같은 HTML 태그를 사용할 수 있을 뿐만 아니라, 앞으로 만들 컴포넌트도 JSX 안에서 작성할 수 있다.

 

# JSX 문법

■ 감싸인 요소

컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다.

왜냐하면 Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다.

(cf. 코드가 한 줄 일때는 감싸지 않아도 된다.)

function App() {
  return (
    <div>
      <h1>리액트 시작!</h1>
      <h2>잘 해봐야지</h2>
    </div>
  )
}
 
export default App;

<div> 태그 대신 <Fragment> 또는 <>로 감싸도 된다.

 

■ 자바스크립트 표현

JSX 안에서는 자바스크립트 표현식을 쓸 수 있다. JSX 내부에서 코드를 { }로 감싸면 된다.

function App() {
  const name = '리액트';
  return (
    <div>
      <h1>{name} 시작!</h1>
      <h2>잘 해봐야지</h2>
    </div>
  )
}
 
export default App;

■ if 문 대신 조건부 연산자

JSX 내부의 자바스크립트 표현식에서 if 문을 사용할 수 없다. 대신 조건부 연산자(삼항 연산자)를 사용하면 된다.

function App() {
  const name = '리액트';
  return (
    <div>
      {name === '리액트' ? (
        <h1>리액트입니다.</h1>
      ) : (
        <h2>리액트가 아닙니다.</h2>
      )}
    </div>
  );
}
 
export default App;

AND 연산자(&&)를 사용한 조건부 렌더링

특정 조건을 만족할 때 내용을 보여 주고, 만족하지 않을 때 아예 아무것도 렌더링 하지 않아야 하는 상황일 때 사용한다.

삼항 연산자에서 null을 사용할 수도 있지만, AND 연산자(&&)를 사용하면 더 간결하다.

function App() {
  const name = '뤼액트';
  return (
    <div>
      {name === '리액트' && <h1>리액트.</h1>}
    </div>
  )
}

export default App;

▶ && 연산자로 조건부 렌더링할 수 있는 이유

리액트에서 false를 렌더링할 때는 null과 마찬가지로 아무것도 나타나지 않기 때문이다.

그러나 falsy한 값인 0은 예외적으로 화면에 나타난다.

 

■ undefined를 렌더링하지 않기

리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하는 상황을 만들면 안 된다. 코드오류가 발생한다. 어떤 값이 undefined일 수도 있다면, OR(||) 연산자를 사용하면 해당 값이 undefined일 때 사용할 값을 지정할 수 있으므로 간단하게 오류를 방지할 수 있다.

 

그러나 JSX 내부에서 undefined를 렌더링하는 것은 괜찮다.

function App() {
  const name = undefined;
  return <div>{name || '리액트'}</div>;
}

export default App;

■ 인라인 스타일링

리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어 주어야 한다.

 

■ class 대신 className

class라고 작성해도 실행은 되지만 브라우저 개발자 도구의 Console 탭에 경고가 나타난다.

 

■ 꼭 닫아야 하는 태그

HTML에서는 코드를 닫지 않아도 작동했지만, JSX에서는 태그를 닫지 않으면 오류가 발생한다.

 

self-colsing 태그 : 태그 사이에 별도의 내용이 들어가지 않는 경우에는, 태그를 선언하면서 동시에 닫을 수 있다.

function App() {
  const name = '리액트';
  return (
    <>
      <div className="react">{name}</div>
      <input />
    </>
  )
}

export default App;

■ 주석

JSX 내부에서는 {/* ... */}와 같은 형식으로 작성한다.

---

# 도움이 되는 도구

■ ESLint

• 문법 검사 도구
• 코드를 작성할 때 실수를 하면 에러 혹은 경고 메시지를 VS Code 에디터에서 바로 확인할 수 있게 해준다.

■ Prettier

• 코드 스타일 자동 정리 도구
• VS Code에서 F1을 누르고 format이라고 입력한 후 Enter를 누르면 실행된다. (단, 다른 포맷 도구를 설치했다면 충돌이 발생할 수도 있다.)
• 자동 코드 정리를 하면 코드가 제대로 정렬된다.
• 세미콜론(;)이 빠진 곳에 자동으로 추가된다.
• 작은따옴표 -> 큰따옴표

---

참고 자료

리액트를 다루는 기술