JSX가 뭐죠?

JSX가 뭐죠?

• JSX 는 Javascript를 확장한 문법입니다.
• React Element를 생성합니다.

왜 써야해요?

리액트에서는, 본질적으로 렌더링 로직이 UI 로직과 연결된다는 사실을 인지하고 있습니다.

고로 React는 마크업과 로직을 인위적으로 별도의 파일로 분리하는 대신, "컴포넌트"라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리하고 있습니다.

사용 방법

Javascript 표현식 삽입

const name = "Josh Perez";
const element = <h1>Hello, {name}</h1>; // JSX는 표현식이기에 변수에 할당할 수 있습니다.

위의 예시처럼 JSX의 중괄호 안에는 유효한 모든 Javascript 표현식을 넣을 수 있습니다.

JSX 속성 정의

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

속성을 정의할 수도 있습니다.

JSX 속성에 Javascript 표현식 삽입

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

속성에 Javascript 표현식을 삽입할 수도 있습니다.

자식 태그

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

자식 태그를 포함할 수 있습니다.

유의사항

자동 세미콜론 삽입 방지

필수는 아니지만, JSX를 여러 줄로 나눌 때 자동 세미콜론 삽입을 피하기 위해 괄호로 묶는 것을 권장합니다.

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

JSX 값 이스케이프(XSS 공격 방지)

const title = response.potentiallyMaliciousInput;
// 이것은 안전합니다.
const element = <h1>{title}</h1>;

애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않습니다.
-> 렌더링 되기 전, 문자열로 변환됩니다.

작동 방식

React.createElement() 호출

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

다음 두 예시는 동일하게 동작합니다.

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

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

React.createElement()는 버그가 없는 코드를 작성하는 데 도움이 되도록 몇 가지 검사를 수행하며, 기본적으로 다음과 같은 객체를 생성합니다.

// 주의: 다음 구조는 단순화되었습니다
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

이러한 객체를 “React Element”라고 하며, 화면에서 보고 싶은 것을 나타내는 표현이라 생각하면 됩니다.
React는 이 객체를 읽어서, DOM을 구성하고 최신 상태로 유지하는 데 사용합니다.