Front-endReact

React 2일차

⏱ 읽기 소요 시간: 14 분

JSX 소개

  • JSX로 만든 엘리먼트는 변수에 담을 수 있고, 함수의 매개변수로도 사용할 수 있다.

왜 JSX인가?

JSX에 표현식 포함하기

  • JSX 안에 자바스크립트 표현식 을 중괄호로 묶어서 포함시킬 수 있다.
  • 예를 들어, 2 + 2, user.firstName, formatName(user) 를
    유효한 표현식으로 표현하면 아래와 같이 표현한다.
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"));
  • 가독성을 좋게 하기 위해 JSX를 여러줄로 나눴습니다. 필수는 아니지만,
    이 작업을 수행할 때는 자동 세미콜론 삽입의 함정을 피하기 위해 괄호로 묶는 것이 좋다.

JSX 또한 표현식이다

  • 컴파일이 끝나면, JSX 표현식이 일반적인 자바스크립트 함수 호출이 되고,
    결과적으로 자바스크립트 객체로 평가된다.

  • 이 말은 if 문이나 for 문 내에서 JSX를 사용할 수 있다.

  • -> 변수에 할당하거나 매개변수로 전달하거나 함수에서 반환할 수 있음을 의미한다.
1
2
3
4
5
6
function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

JSX 어트리뷰트 정의

  • 어트리뷰트에서 따옴표를 사용해서 문자열 리터럴을 정의할 수 있다.
1
const element = <div tabIndex="0" />;
  • 어트리뷰트에 중괄호를 사용하면, 자바스크립트 표현식을 포함시킬 수 있습니다.
1
const element = <img src={user.avtarUrl} />;
  • 어트리뷰트에 자바스크립트 표현식을 포함시킬 때 중괄호를 따옴표로 묶지 말아야 한다.
    • 따옴표 (문자열 값인 경우) 또는 중괄호 (표현식인 경우) 중 하나를 사용해야 하며,
      하나의 어트리뷰트에 둘 다 사용할 수 있는 것이 아니다.
1
2
3
이렇게 하면, user.avatarUrl에 들어있는 값이 넘어가는 게 아니라 문자열이 넘어감
const element = <img src="{user.avatarUrl}"></img>;
const element = <img src="user.avatarUrl"></img>;

경고:
HTML에서 사용하던 어트리뷰트 이름을 JSX에서 그대로 사용할 수 없다.
JSX는 HTML보다는 자바스크립트에 가깝기 때문에,
React DOM은 HTML 어트리뷰트 이름 대신 camelCase 어트리뷰트 이름 컨벤션을 사용합니다.

ex1) React에서는 tabIndex를 camelCase로 써준다.
React 라이브러리를 통해 tabindex라고 변환되어 HTML에 들어가는 것이다.

ex2) HTML에서는 label for를 React에서는 label htmlFor로 써야한다.
예를 들어, JSX에서 class 는 className 이 되며, tabindex 는 tabIndex 가 됩니다.

JSX 자식 정의

  • 만약 태그가 비어있다면, XML 처럼 /> 를 이용해 닫아주어야 한다.
  • React에서는 HTML에서 여는 태그만 있는 태그들을 꼭 닫아주는 태그도 써줘야 한다.
    ex) img, link
1
const element = <img src={user.avatarUrl} />;
  • JSX 태그는 자식을 가질 수 있다.
1
2
3
4
5
6
const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

JSX 인젝션 공격 예방

  • 사용자가 입력한 내용을 JSX 내에 포함시켜도 안전하다.
    • React에 XSS(cross-site-scripting)공격에 대한 보안 기능이 내장되어 있기 때문이다.
1
2
3
const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;
  • 기본적으로, React DOM은 렌더링 되기 전에 JSX 내에 포함된 모든 값을 이스케이프 한다.
  • 따라서 어플리케이션에 명시적으로 작성되지 않은 내용은 절대 삽입할 수 없습니다.
  • 모든 것은 렌더링 되기 전에 문자열로 변환된다.
    이렇게 하면 XSS (cross-site-scripting) 공격을 막을 수 있다.

JSX 객체 표현

  • 사용자의 브라우저는 자바스크립트 코드만 해석할 수 있으므로
    JSX 코드를 자바스크립트 코드로 컴파일한 후 전달해야 한다.

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

  • 아래 두 예제는 동일하다.

1
const element = <h1 className="greeting">Hello, world!</h1>;
1
2
3
4
5
const element = React.createElement(
  "h1",
  { className: "greeting" },
  "Hello, world!"
);
  • React.createElement() 는 버그 없는 코드를 작성하는 데
    S도움을 주는 몇 가지 체크를 하긴 하지만,
    기본적으로는 아래와 같은 객체를 생성한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
// Note: this structure is simplified

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

- 이 객체를 "React"요소라고 부른다.
- React요소는 화면에서 보고자 하는 내용에 대한 설명 내지 서술로 생각할 수 있다.
- React는 이 객체를 읽어들이고 이를 사용하여 DOM을 만들어낸 뒤 최신 상태로 유지한다.
Share