[React] JSX

※배워가고 있는 학생입니다. 틀린 부분이 있다면 댓글로 피드백 부탁드립니다!😁

 

리액트를 막 배우기 시작하면서, 처음 부딪친 난관은 바로 JSX 였다!

html 만 공부하던 나에게 조금 혼란을 주는 문법이었는데,

오늘 스터디에서 현직자분이 가르쳐주신 덕분에! (감사합니다ヽ(✿ﾟ▽ﾟ)ノ) 조금 명확해질 수 있었다.

그래서 알게 된 이참에 저서를 참고해서 조금 정리해두려고 한다.

1) JSX 문법이란?

근본적으로, JSX는 React.createElement(component, props, ...children) 함수에 대한
문법적 설탕을 제공할 뿐입니다. -React 문서-

 

JSX는 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼다.

이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. JavaScript의 모든 기능이 포함되어 있으며, React “엘리먼트(element)” 를 생성한다.

 

**그렇다면 JSX도 자바스크립트 문법이라고 할 수 있을까?

JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법이 아니다!

바벨에서는 여러 문법을 지원할 수 있도록 preset 및 plugin을 설정하며, 바벨을 통해 개발자들이 임의로 만든 문법, 혹은 차기 자바스크립트의 문법들을 사용할 수 있다.

2) 문법

1. 태그를 열었으면, 반드시 닫아야 한다!

html 코드를 작성하다보면, 태그를 굳이 닫지 않아도 되는 태그가 있다. 가령, input이나 br 같은 태그가 있는데,

리액트에서 이를 닫아주지 않으면 오류가 생기기 때문에 반드시 닫아주어야 한다.

<input></input>

태그 사이에 별도의 내용이 들어가지 않는 경우에는 다음과 같이 작성할 수도 있다 이러한 태그를 self-closing 태그라고 부르며, 태그를 선언하면서 동시에 닫을 수 있는 태그다.

<input />
<br />
<div />

 

 

2. 가장 바깥 쪽에는 요소가 무조건 1개여야 한다.

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

function App() {
  return (
    <h1>안녕하세요</h1>
    <h2>세고래 블로그입니다</h2>
  );
} //오류: Failed to compile. 
//Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>?

앞과 같은 코드는 오류가 나는 잘못된 코드다. 

요소 여러 개가 부모 요소 하나에 의하여 감싸져 있지 않기 때문에 오류가 발생했는데,

이 오류는 다음과 같이 코드를 작성하여 해결할 수 있다.

 

function App() {
  return (
    <div>
    <h1>안녕하세요</h1>
    <h2>세고래 블로그입니다</h2>
    </div>
  );
}

리액트 컴포넌트에서 요소 여러 개를 왜 하나의 요소로 꼭 감싸 주어야 하는 이유는

Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록

컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다.

(virtual dom에 대한 설명: https://thebook.io/080203/ch01/02/01/02/)

 

여기서 꼭 div 요소를 사용하고 싶지 않을 수도 있는데, 그런 경우에는 리액트 v16 이상 부터 도입된 Fragment라는 기능을 사용하면 된다.

function App() {
  return (
    <React.Fragment>
      <h1>안녕하세요
      <h2> 세고래 블로그입니다. </h2>
    </React.Fragment>
  );
}

//ragment는 다음과 같은 형태로도 표현할 수 있다.
function App() {
  return (
    <>
      <h1>안녕하세요</h1>
      <h2>세고래 블로그입니다</h2>
    </>
  );
}

3. 자바스크립트 표현

JSX 안에서는 자바스크립트 표현식을 쓸 수 있다.

자바스크립트 표현식을 작성하려면 JSX 내부에서 코드를 { }로 감싸면 된다.

function App() {
  const name = '세고래';
  return (
    <>
      <h1>안녕하세요</h1>
      <h2>{name} 블로그입니다</h2> //앞 코드들과 똑같은 화면이 나옴
    </>
  );
}

4. If 문 대신 조건부 연산자

JSX 내부의 자바스크립트 표현식에서 if 문을 사용할 수는 없다.

하지만 조건에 따라 다른 내용을 렌더링해야 할 때는

JSX 밖에서 if 문을 사용하여 사전에 값을 설정하거나, { } 안에 조건부 연산자를 사용하면 된다.

조건부 연산자의 또 다른 이름은 삼항 연산자다.

function App() {
  const name = '세고래';
  return (
    <div>
      {name === '세고래'? (
        <h1>세고래입니다.</h1>
      ) : (
        <h2>세고래가 아닙니다.</h2>
      )}
    </div>
  );
}

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

개발하다 보면 특정 조건을 만족할 때 내용을 보여 주고, 만족하지 않을 때 아예 아무것도 렌더링하지 않아야 하는 상황이 생긴다. 이럴 때도 앞서 배운 조건부 연산자를 통해 구현할 수는 있다.

function App() {
  const name = '쉐고뤠';
  return <div>{name === '세고래' ? <h1>세고래입니다.</h1> : null}</div>;
}

위 코드와 같이 null을 렌더링하면 아무것도 보여 주지 않는다.

하지만 이것보다 더 짧은 코드로 똑같은 작업을 할 수 있다.

그것은 &&연산자를 사용한 조건부 랜더링이다!

function App() {
  const name = '쉐고뤠';
  return <div>{name === '세고래' && <h1>세고래입니다.</h1>}</div>;
}

위의 코드에서 name 값을 세고래로 설정하면 ‘세고래입니다.’라는 문구가 나타날 것이다.

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

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

여기서 한 가지 주의해야 할 점이 있는데, falsy한 값인 0은 예외적으로 화면에 나타난다는 것이다!

const number = 0;
return number && <div>내용</div>
// 이런 코드는 화면에 숫자 0을 보여 준다.

6. undefined를 렌더링하지 않기

리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하는 상황을 만들면 안 된다.

예를 들어 다음과 같은 코드는 오류를 발생시킨다.

function App() {
  const name = undefined;
  return name;
}

어떤 값이 undefined일 수도 있다면, OR(||) 연산자를 사용하면

해당 값이 undefined일 때 사용할 값을 지정할 수 있으므로 간단하게 오류를 방지할 수 있다.

반면 JSX 내부에서 undefined를 렌더링하는 것은 괜찮다.

function App() {
const name = undefined;
return <div>{name}</div>;
} //괜찮음!

function App() {
const name = undefined;
return name || ‘값이 undefined입니다.‘; //name 값이 undefined일 때 보여 주고 싶은 문구가 있다면
}

7. 카멜 표기법 

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

스타일 이름 중에서 background-color처럼 - 문자가 포함되는 이름이 있는데데,

이러한 이름은 - 문자를 없애고 카멜 표기법(camelCase)으로 작성해야 한다.

따라서 background-color는 backgroundColor로 작성한다.

요소에서 이벤트를 핸들링하는 onclick 등의 단어들 또한 onClick처럼 카멜표기법으로 표기해야 한다.

 

8. class 대신 className

일반 HTML에서 CSS 클래스를 사용할 때는 <div class="myclass"></div>와 같이 class라는 속성을 설정한다.

하지만 JSX에서는 class가 아닌 className으로 설정해 주어야 한다.

function App() {
  const name = '세고래';
  return <div className="segorae">{name}</div>;
}

9. 주석

JSX 내부에서 주석을 작성할 때는 {/* … */}와 같은 형식으로 작성하며, 이렇게 여러 줄로 작성할 수도 있다.

그리고 시작 태그를 여러 줄로 작성할 때는 그 내부에서 // …과 같은 형태의 주석도 작성할 수 있다.

만약 일반 자바스크립트에서 주석을 작성할 때처럼 아무 데나 주석을 작성하면 그 주석은 페이지에 고스란히 나타난다.

function App() {
  const name = ‘세고래‘;
  return (
    <>
      {/* 주석은 이렇게 작성합니다. /}
      <div
        className=“segorae“ // 시작 태그를 여러 줄로 작성하게 된다면 여기에 주석을 작성할 수 있습니다.
      >
        {name}
      </div>
      // 하지만 이런 주석이나
      / 이런 주석은 페이지에 그대로 나타나게 됩니다. */
      <input />
    </>
  );
}