Home [React] JSX 소개
Post
Cancel

[React] JSX 소개

[React] JSX 소개

JSX 란?

1
const element = <h1>Hello, world!</h1>;
  • 위의 문법을 JSX라고 하며, JavaScript를 확장한 문법
  • JSX는 React “엘리먼트(element)”를 생성
  • React에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI 로직과 연결된다는 사실을 받아들인다.
  • React는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리
  • React는 JSX 사용이 필수가 아님
  • 하지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각
  • 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해준다.

JSX 예시

1
2
3
4
const name = "Josh Perez";
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(element, document.getElementById("root"));
1
2
3
4
5
6
7
8
9
10
11
12
function formatName(user) {
  return user.firstName + " " + user.lastName;
}

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

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

ReactDOM.render(element, document.getElementById("root"));
1
2
3
4
5
6
function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

JSX 속성 정의

1
2
3
const element = <div tabIndex="0"></div>;

const element = <img src={user.avatarUrl}></img>;
  • 어트리뷰트에 JavaScript 표현식을 삽입할 때
  • 중괄호 주변에 따옴표를 입력하면 안된다.
  • 따옴표(문자열 값에 사용) 또는 중괄호(표현식에 사용) 중 하나만 사용
  • 동일한 어트리뷰트에 두 가지를 동시에 사용하면 안된다.

JSX로 자식 정의

1
2
3
4
5
6
7
8
const element = <img src={user.avatarUrl} />;

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

JSX는 주입 공격을 방지

1
2
3
const title = response.potentiallyMaliciousInput;
// 이것은 안전합니다.
const element = <h1>{title}</h1>;
  • JSX에 사용자 입력을 삽입하는 것은 안전
  • 기본적으로 React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전
  • 이스케이프한다.
  • 따라서 명시적으로 작성되지 않은 내용은 주입되지 않는다.
  • 모든 항목은 렌더링 되기 전에 문자열로 변환
  • 이런 특성으로 인해 XSS(cross-site-scripting) 공격을 방지

JSX는 객체를 표현

1
2
3
4
5
6
7
8
// 다음 두 예시는 동일
const element = <h1 className="greeting">Hello, world!</h1>;

const element = React.createElement(
  "h1",
  { className: "greeting" },
  "Hello, world!"
);
  • React.createElement()는 버그가 없는 코드를 작성하는데 도움이 되도록 몇 가지 검사를 수행
  • 기본적으로 다음과 같은 객체를 생성
1
2
3
4
5
6
7
8
// 주의: 다음 구조는 단순화되었습니다
const element = {
  type: "h1",
  props: {
    className: "greeting",
    children: "Hello, world!",
  },
};
  • 이러한 객체를 “React 엘리먼트”라고 한다.
  • 이를 화면에 표시하려는 항목에 대한 설명이라고 생각할 수 있음
  • React는 이러한 객체를 읽은 후 DOM을 구성하고 최신으로 유지하는 데 이러한 객체를 사용

References

This post is licensed under CC BY 4.0 by the author.

[React] React 공부하기

[React] 엘리먼트 렌더링