React JSX 소개

15740 단어 ReactReact

JSX 소개

Hello world

먼저 글을 읽으며 실습을 하고싶은 사람은 react-create-app 을 보고오자.

<!-- HTML -->
<div id="root"></div>
//jsx
ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

먼저 가장 기본이되는 Hello world 부터 화면에 출력해보자. HTML에서 div의 id값을 root로 주었다. jsx에서 getElementById로 id가 root인 태그를 찾아 h1 태그를 넣어 랜더링 시켜주고 있다.

여기서 JSX란 무엇일까?
const element = <h1>Hello, world!</h1>; 가 JSX이고, JavaScript를 확장한 문법이다. XML과 비슷하게 생겼으며, 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.


const name = 'LEE HYUNHO';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

위와 같이 JavaScript 변수를 선언하여 중괄호로 감싸 JSX 안에 사용할 수 있다.


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

const user = {
  firstName: 'LEE',
  lastName: 'HYUNHO'
};

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

ReactDOM.render(
  element,
  document.getElementById('root')
);

중괄호 안에 함수를 넣을수도 있다. 결과는 Hello, LEE HYUNHO로 같다.


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


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

const user = {
  firstName: 'LEE',
  lastName: 'HYUNHO'
};

const element = (
  <h1>
    {getGreeting(user)}
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

JSX도 표현식이다. JSX를 if, for 등 안에 사용하고 변수에 할당하고 인자로서 받아들이고 함수로 부터 반환할 수 있다. user가 없다면 위의 결과를 얻을 것이다.


  • JSX 속성

    • 문자열 리터럴 정의
      const element = <div id="root"></div>;
      " 으로 정의한다.

    • 속성에 JS 표현식 삽입
      const element = <img src={user.avatarUrl}></img>;
      중괄호를 이용한다.

    • camelCase
      JSX는 HTML보다 JS에 가깝다. 그래서 HTML 속성 이름 대신 camelCase을 사용한다.
      ex) class="btn" 이 아니라 className="btn" 사용


  • JSX 자식 정의

    • 비어있는 태그
      const element = <img src={user.avatarUrl} />;
      XML처럼 비어있는 태그는 바로 닫아주자.

    • 자식

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

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


  • XSS 공격 방지
    const title = response.potentiallyMaliciousInput;
    // 이것은 안전합니다.
    const element = <h1>{title}</h1>;
    React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 escape 한다. 또한, 모든 항목은 문자열로 변환하기 때문에, 애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않는다. (무슨 의미인지 잘 모르겠다..)

  • JSX는 객체를 표현

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

    이 두 예시는 같다. Babel은 JSX를 react.createElement() 호출로 컴파일한다.

    const element = {
      type: 'h1',
      props: {
        className: 'greeting',
        children: 'Hello, world!'
      }
    };

    이와같은 객체를 생성하게 되는 것이다. ( = React 엘리먼트)
    React는 이 객체를 읽어 DOM을 구성하고 최신 상태로 유지하는데 사용한다.


마무리

JSX > React.Element > Virtual DOM > ReactDOM 랜더링

좋은 웹페이지 즐겨찾기