[리액트] JSX 문법

 

🎀 JSX 란?

• JavaScript를 확장한 문법이다.
• React에서는 본직적으로 렌더링 로직이 UI로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들인다.
• React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 "컴포넌트"라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리한다.
  • 관신사의 분리 : 컴퓨터 과학에서 관심사 분리는 컴퓨터 프로그램을 별개의 섹션으로 분리 하기 위한 설계 원칙이다.
• React는 JSX 사용이 필수는 아니다.

 

 

 

 

 

 

🎈 JSX에 표현식 포함하기

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

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

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

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

• JSX의 중괄호 안에는 유효한 모든 JavaScript 표현식을 넣을 수 있다.
  • e.g.) 2+2, user.firstName, formatName(user)등의 모두 유효한 JavaScript 표현식이다.

 

 

 

 

 

 

🎈 JSX도 표현식이다.

• 컴파일이 끝나면 JSX 표현식이 정규 JavaScript 함수 호출이 되고 JavaScript 객체로 인식된다.
• 즉, JSX를 if 구문 및 for loop 안에 사용하고, 변수에 할당하고, 인자로서 받아들이고, 함수로부터 반환할 수 있다.

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

 

 

 

 

 

 

 

🎈JSX 속성 정의

• 어트리뷰트에 따옴표를 이용해 문자열 리터럴을 정의할 수 있다.

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

• 중괄호를 사용하여 어트리뷰트에 JavaScript 표현식을 삽입할 수 있다.

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

 

❗ 어트리뷰트에 JavaScript 표현식을 삽입할 때 중괄호 주변에 따옴표를 입력하면 안된다. 
따옴표(문자열 값에 사용) 또는 중괄호(표현식에 사용) 중 하나만 사용하고, 동일한 어트리뷰트에 두가지를 동시에 사용하면 안된다.

🧨
JSX는 HSML보다는 JavsCript에 가깝기 때문에, React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용한다.

e.g.) class => className , tabindex => tabIndex

 

 

 

 

 

 

🎈 JSX로 자식 정의

• 태그가 비어있다면 XML처럼 ' /> ' 를 이용해 바로 닫아주어야 한다.

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

• 자식을 포함할 수 있다.

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

 

 

 

 

 

 

🎈 JSX는 주입 공격을 방지한다.

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

• JSX에 사용자 입력을 삽입하는 것은 안전하다.
• 기본적으로 React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프 하므로, 애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않는다.
  • HTML에서 이스케이프한다는 것은, 몇가지 특별한 문자들을 교체하는 것이다.
  • e.g.) <, >, ",& 등
• 모든 항목은 렌더링 되기 전에 문자열로 변환된다.
• 이런 특성으로 인해 XSS(cross-site-scripting) 공격을 방지할 수 있다.
  • 사이트 간 스크립팅(또는 크로스 사이트 스크립팅)은 웹 애플리케이션에서 많이 나타나는 취약점의 하나로 웹 사이트 관리자가 아닌 이가 웹 페이지에 악성 스크립트를 삽입할 수 있는 취약점이다.
  • 이 취약점은 웹 애플리케이션이 사용자로부터 입력받은 값을 제대로 검사하지 않고 사용할 경우 나타난다. 

 

 

 

 

 

 

🎈 JSX는 객체를 표현한다.

• 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 엘리먼트 라고 하며, 화면에서 보고 싶은 것을 나타내는 표현이라 생각하면 된다.
• React는 이 객체를 읽어서, DOM을 구성하고 최신 상태로 유지하는 데 사용한다.

 

TIP😚
ES6 및 JSX 코드가 올바르게 표시되도록 편집기에 "Babel" 언어 설정을 사용하는 것을 권장한다.

 

 

 

 

 

 

---

참고 :

 

https://ko.reactjs.org/docs/introducing-jsx.html

JSX 소개 – React

https://en.wikipedia.org/wiki/Separation_of_concerns

Separation of concerns - Wikipedia

https://wikidocs.net/127508

082 XSS 공격을 막으려면? ― html