React에서 사용하는 JSX 문법에 대해 알아보자

❓ JSX란?

리액트에서 컴포넌트는 자바스크립트 함수로 만드는데, 특이하게도 이 함수는 HTML 값을 반환합니다. 이렇듯 자바스크립트와 HTML 태그를 섞어 사용하는 문법을 JSX(자바스크립트 XML)라고 합니다. JSX는 자바스크립트의 확장 문법입니다.

JSX는 공식 자바스크립트 문법은 아니지만, 대부분의 리액트 프로젝트에서 사용하며 공식 문서의 예제로도 사용됩니다.

자바스크립트 표현식

산술 표현식

function Body() {
  const numA = 1, numB = 2;
  return (<h2>{numA + numB}</h2></>); //3
}

두 변수를 더한 연산식을 화면에 구현합니다.

문자열 표현식

function Body() {
  const strA = "안녕", strB = "리액트";
  return (<h2>{strA + strB}</h2></>);  //안녕리액트
}

문자열과 문자열을 이어 붙입니다.

논리 표현식

function Body() {
  const boolA = true, boolB = false;
  return (
    <>
      <h2>{boolA || boolB}</h2> //아무것도 렌더링 x
      <h2>{String(boolA || boolB)}</h2> //true
    </>
  );
}

논리 표현식의 결과인 불리언 값은 숫자나 문자열과 달리 페이지에 렌더링되지 않습니다.
불리언 값을 페이지에 렌더링하고 싶다면, 형 변환 함수를 이용해 문자열로 바꿔 주어야 합니다.

사용할 수 없는 값

function Body() {
  const objA = {
    a: 1,
    b: 2,
  };
  return (
    <>
      <div>{objA}</div> //error
      <div>{objA.a}</div> //1
    </>
  );
} 

원시 자료형에 해당하는 숫자, 문자열, 불리언, null, undefined를 제외한 값을 사용하면 오류가 발생합니다.

JSX 문법에서 지켜야 할 것들

닫힘 규칙

<img>, <input> 등 빈 요소 또한 <img />, <input />과 같이 닫힘 태그를 반드시 병기해야 합니다.

function Body() {
  return (
    <div>
      <h1>body //error
    </div>
  );
}

최상위 태그 규칙

JSX가 반환하는 모든 태그는 반드시 최상위 태그로 감싸야 합니다.

function Body() {
  return (
    <div>div 1</div>
    <div>div 2</div>
  )
} 

// 아래와 같이 수정해야 합니다.
function Body() {
  return (
    <>
      <div>div 1</div>
      <div>div 2</div>
    </>
  );
}

빈 태그 대신 <React.Fragment>로 감쌀 수도 있습니다.

조건부 렌더링

리액트 컴포넌트가 조건식의 결과에 따라 각기 다른 값을 페이지에 렌더링하는 것을 조건부 렌더링이고 합니다.

삼항 연산자

function Body() {
  const num = 19;
  return (
      <h2>
        {num}은(는) {num % 2 === 0 ? "짝수" : "홀수"}입니다.
      </h2>
  );
} //홀수

조건문

function Body() {
  const num = 200;
  if (num % 2 === 0) {
    return <div>{num}은(는) 짝수입니다</div>;
  } else {
    return <div>{num}은(는) 홀수입니다</div>;
  }
} //200은 짝수입니다

JSX 스타일링

인라인 스타일링

function Body() {
  return (
    <div style={{ backgroundColor: "red", color: "blue" }}>
    </div>
  );
}

JSX의 인라인 스타일링은 style={{규칙}} 으로 작성합니다. 객체를 생성한 다음 각각의 스타일을 프로퍼티 형식으로 작성하며, backgroundColor와 같이 카멜 표기법으로 작성해야 합니다. (CSS 표기 방식: background-color)

🔗참고 자료
한 입 크기로 잘라먹는 리액트