[리액트] JSX 알아보기

🎈개요

앞으로 인프런에서 산 강의를 들으면서 그 동안 강의에서 배운 개념들을 React 공식 문서에서 공부해보고 그 공부한 내용을 여기다가 정리하려고 한다.

열심히 살아보자....

---

🎈JSX란?

const element = <h1>Hello, world!</h1>;

• 보통의 경우 마크업은 마크업대로(HTML), 로직은 로직대로(Javascript) 파일을 따로 만들어 관리하지만, React는 마크업과 로직을 합친 Javascript의 확장된 문법 JSX를 함께 사용한다.

---

🎈JSX에서의 Javascript 표현식

• "1+1", "format(user)", "user.name" 이런 형식의 식은 모두 Javascript의 표현식이다. 이런 표현식들은 JSX에선 중괄호에 넣어주어야 한다.
• 그리고 밑의 코드 중괄호 안에 들어간 자바스크립트 표현식도 하나의 자바스크립트 객체로 인식이 된다. 변수, 인자, 함수 반환 등 모든 것이 가능하다.

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

• Babel에서는 JSX로 선언된 엘리먼트를 React.createElement()로 바꾸어 컴파일 한다. 이렇게 컴파일된 객체가 리액트 앨리먼트이다.

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

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

둘은 서로 같은 코드라고 할 수 있다.

---

🎈JSX Attribute와 JSX로 자식 정의

const element = <a href="https://www.reactjs.org"> link </a>;
const element2 = <img src={user.avatarUrl}></img>;

• 어트리뷰트에는 문자열이 들어갈 수도 있고, 중괄호로 포장된 자바스크립트 표현식이 들어갈 수도 있다.

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

• JSX 태그도 자식을 가질 수 있다.

---

🎈JSX의 XSS 공격 방지

• React DOM은 JSX에 삽입된 값을 렌더링 하기 이전에 escape(문자열로 변환)하므로 명시적으로 작성되지 않는 내용은 렌더링 되지 않는다.

Escape란?

• 이스케이프란, Java를 예로 들면 " 를 문자열로 인식 시키기 위해 \" 로 표현하는 것 처럼, HTML도 < 등 구문으로 분리되는 문자들을 텍스트로 인식 시키기 위해 & lt 처럼 작성하는 방법을 말한다.

XSS(Cross-site scripting)

• 클라이언트를 대상한 공격
• 사용자의 입력폼에 악성 스크립트를 삽입, 렌더링 될 때 스크립트가 실행