React, JSX 문법

JSX는 JavaScript를 확장한 문법입니다.

 

JavaScript 파일을 HTML과 비슷하게 마크업을 작성할 수 있도록 해줍니다

Web이 더욱 interactive해지면서, 로직이 내용(HTML)을 결정하는 경우가 많아졌습니다.

 

이것이 바로 React에서 렌더링 로직과 마크업이 같은 위치에 함께 있게 된 이유입니다.

 

 

💡 JSX와 React는 서로 다른 별개의 개념입니다. 종종 함께 사용되기도 하지만 독립적으로사용할 수도 있습니다. JSX는 확장된 문법이고, React는 JavaScript 라이브러리입니다.

Introducing the New JSX Transform – React Blog

 

 

1. 하나의 루트 엘리먼트로 반환하기

💡 왜 여러 JSX 태그를 하나로 감싸줘야 할까요?

JSX는 HTML처럼 보이지만 내부적으로는 일반 JavaScript 객체로 변환됩니다.

 

하나의 배열로 감싸지 않은 하나의 함수에서는 두 개의 객체를 반환할 수 없습니다.

따라서 또 다른 태그나 Fragment로 감싸지 않으면 두 개의 JSX 태그를 반환할 수 없습니다.

return (
<>
	/* ... */
</>

)

2. 모든 태그는 닫아주기

JSX에서는 태그를 명시적으로 닫아야 합니다.

<img>처럼 자체적으로 닫아주는 태그는 반드시 <img /> 형태로 작성해야 하며

<li>oranges와 같은 wrapping 태그도 <li>oranges</li> 형태로 작성해야 합니다.

<div>
	<img/>
	<li>Orange</li>
	<li>Apple</li>
</div>

3. 대부분 Camel 케이스로!

JSX는 JavaScript로 바뀌고 JSX에서 작성된 Attribute는 JavaScript 객체의 키가 됩니다.

 

컴포넌트에서는 종종 어트리뷰트를 변수로 읽고 싶은 경우가 있습니다.

그러나 JavaScript는 변수명에 제한이 있습니다.

예를 들면, 변수명에 대시를 포함하거나 class처럼 예약어를 사용할 수 없습니다.

 

이것이 바로 React에서 HTML과 SVG의 어트리뷰트 대부분이 캐멀 케이스로 작성되는 이유입니다.

 

예를 들면, stroke-width 대신 strokeWidth로 사용합니다.

class는 예약어이기 때문에, React에서는 DOM의 프로퍼티의 이름을 따서 className으로 대신 작성합니다.

 

React는 브라우저 콘솔에서 수정 가능한 부분을 메시지로 알려줍니다.

💡 팁: JSX 변환기 사용하기

변환기를 사용하여 기존 HTML과 SVG를 JSX로 변환할 수 있습니다. 

 

4.중괄호 ‘{}’ 동적 프로퍼티 사용법

때로는 JavaScript 로직을 추가하거나 해당 마크업 내부의 동적인 프로퍼티를 참조하고 싶을 수 있습니다.

이 상황에서는 JSX에서 중괄호를 사용하여 JavaScript를 사용할 수 있습니다.

export default function Avatar() {
  const avatar = '<https://i.imgur.com/7vQD0fPs.jpg>';
  const description = 'Gregorio Y. Zara';
  return (
    <img
      className="avatar"
      src={avatar}
      alt={description}
    />
  );
}

1. 다음과 같이 어트리뷰트 뒤에 동적으로 자바스크립트 프로퍼티를 사용할 수 있습니다.

export default function TodoList() {
  const name = 'Gregorio Y. Zara';
  return (
    <h1>{name} To Do List</h1>
  );
}

2. 다음과 같이 태그 텍스트 안에도 동적으로 사용가능 합니다.

이중 중괄호, 자바스크립트 객체 전달

export default function TodoList() {
  return (
    <ul style={{
      backgroundColor: 'black',
      color: 'pink'
    }}>
      <li>Improve the videophone</li>
      <li>Prepare aeronautics lectures</li>
      <li>Work on the alcohol-fuelled engine</li>
    </ul>
  );
}

다음과 같이 style을 전달할 때 객체로 전달할 수도 있습니다.

💡 JSX에서 이중괄호는 그저 { } 객체가 보내지는 것에 불과합니다.

 

JSX를 해석하는 구문이 스택으로 문자열을 읽어들이고 다른 중괄호가 닫힐 때까지

나머지는 문자로 해석하는 것 같습니다. 이렇게 스택은 다양하게 쓰인다!

 

 

HTML to JSX

 

공통 컴포넌트 (예시: <div>) – React

 

JSX로 마크업 작성하기 – React

 

Introducing the New JSX Transform – React Blog