react - JSX란?

JSX에 표현식 포함하기!

 

JSX의 중괄호{} 안에는 유효한 모든 javascript 표현식을 사용할 수 있다.

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

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

 

 

중괄호 안에 formatName(user) 라는 함수를 호출해서 반환 결과를 삽입할 수도 있다.

 

또한 element에 JSX 문법을 넣어줄때 처럼 괄호()로 묶는 것이 자동 세미콜론 삽입을 피하는데 유용하다~

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도 표현식이다!

if문으로 분기처리 후 return 결과에 JSX 표현식이 포함될 수 있다!!

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

 

 

 

JSX 속성 정의 

속성에 ""(더블 쿼테이션) 을 사용하여 지정가능

const element = <div tabIndex="0"></div>;

 

중괄호{} 를 사용하여 src라는 속성에 javascript 표현식을 사용할 수도 있다.

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

 

주의 

 1.  attribute에 {}를 사용하여 javasript 표현식을 사용할때 ""를 같이 사용하면 안된다!

 

     둘중 하나만 사용해야 한다.

 

 2. JSX는 HTML보다는 Javscript에 더 가깝기 때문에 React DOM은 HTML attribute이름 대신 camelCase 프로퍼티 

 

     명명 규칙을 따른다.

  

      ex)  class -> className , tabindex -> tabIndex

 

 

 

JSX로 자식 정의

태그가 비어 있다면 /를 이용하여 닫아주어야 함!

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

 

JSX 태그는 자식 태그를 포함할 수 있다!

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

 

 

JSX는 주입 공격을 방지해준다!!

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

기본적으로 react DOM이란 놈은 JSX에 삽입된 모든 값을 렌더링전에 이스케이프 하므로, 애플리케이션에 명시적으로 

 

작성되지 않은 내용은 주입되지 않는다! (모든 항목은 렌더링 되기전에 문자열로 변환)

 

 -> 이러한 특성으로 인해 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 element라고 하며, react는 이러한 객체를 읽은 후 DOM을 구성하고 최신으로 유지하는데

 

    이러한 객체를 사용한다.