JSX 소개 | React Docs

Hello World

가장 단순한 React 예시

const root = ReactDOM.creactRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>)

JSX 소개

// jsx 문법 예시
const element = <h1>Hello, world!</h1>;

JSX

• JavaScript를 확장한 문법
• JavaScript의 모든 기능이 포함되어 있다.

React에서는 렌더링 로직이 *UI 로직과 연결된다.

*UI 로직 : 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등

React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리지 않고, 둘 다 포함하는 컴포넌트라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리한다.

React에서 JSX 사용이 필수는 아니다.

JSX에 표현식 포함하기

JSX의 중괄호 안에는 유효한 모든 JavaScript 표현식을 넣을 수 있다.

// name이라는 변수를 선언한 후 중괄호로 감싸 JSX 안에 사용
const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

function formatName(user) {
  return user.fitstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

// JavaScript 함수 호출의 결과인 formatName(user)을 <h1> 앨리먼트에 포함
const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

JSX도 표현식입니다

컴파일이 끝나면, JSX 표현식이 정규 JavaScript 함수 호출이 되고 JavaScript 객체로 인식된다.
즉, JSX를 if 구문 및 for loop 안에 사용하고, 변수에 할당하고, 인자로서 받아들이고, 함수로부터 반환할 수 있다.

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

JSX 속성 정의

어트리뷰트에 따옴표를 이용해 문자열 리터럴을 정의할 수 있다.

const element = <a href="https://www.reactjs.org"> link </a>;

중괄호를 사용하여 어트리뷰트에 JavaScript 표현식을 삽입할 수 있다.

const element = <img src={user.avatarUrl}></img>;

어트리뷰트에 JavaScript 표현식을 삽입할 때 중괄호 주면에 따옴표를 입력하지 않는다.
따옴표(문자열 값에 사용) 또는 중괄호(표현식에 사용) 중 하나만 사용하고, 동일한 어트리뷰트에 두 가지를 동시에 사용하지 않는다.

주의사항

JSX는 HTML보다는 JavaScript에 가깝기 때문에, ReactDOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용한다.

• class ⇒ className
• tabindex ⇒ tabIndex

JSX로 자식 정의

태그가 비어있다면 XML처러 />를 이용해 바로 닫아주어야 한다.

const element = <img src={user.avatarUrl} />;

JSX 태그는 자식을 포함할 수 있다.

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

JSX는 주입 공격을 방지합니다

JSX에 사용자 입력을 삽입하는 것은 안전하다.

const title = response.potentiallyMaliciousInput;
const element = <h1>{title}</h1>;

기본적으로 React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프 하므로, 애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않는다.
모든 항목은 렌더링 되기 전에 문자열로 변환된다. 이런 특성으로 인해 XSS(cross-site-scripting) 공격을 방지할 수 있다.

JSX는 객체를 표현합니다

Babel은 JSX를 React.createElement() 호출로 컴파일한다.

다음 두 예시는 동일하다.

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.creactElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement()는 몇 가지 검사를 수행하며, 기본적으로 다음과 같은 객체를 생성한다.

// 다음 구조는 단순화하여 표현된 코드이다
const element = { 
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

이러한 객체를 "React 앨리먼트"라고 하며, 화면에서 보고 싶은 것을 나타내는 표현이라 생각하면 된다. React는 이 객체를 읽어서, DOM을 구성하고 최신 상태로 유지하는 데 사용한다.