React] JSX란

JSX

const elemnt = <h1>Hello, world!</h1>

위의 태그 문법은 문자열도, HTML도 아닙니다.

JSX라 하여 JavaScript를 확장한 문법입니다.
JSX는 JavaScript의 모든 기능이 포함되어 있습니다.

JSX란?

React에서는 렌더링 로직이 UI로직과 연결된다는 사실을 받아들입니다.
React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신,
둘 다 포함하는 "컴포넌트"라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다.

• UI로직
  • 이벤트가 처리되는 방식,시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등

JSX에 표현식 포함하기

아래 예시에서는 name이라는 변수를 선언 후 중괄호로 감싸 JSX안에 사용하였습니다.

const name = 'Jong Hyuk';
const element = <h1>Hello, {name}</h1>

JSX의 중괄호 안에는 유효한 모든 JavaScript표현식을 넣을 수 있습니다.

아래 예시에서는 JavaScript 함수호출의 결과인 formatName(user)을 <h1>엘리먼트에 포함했습니다.

const formatName = ({firstName, lastName}) => {
  return firstName + ' ' + lastName;
}

const user = {
  firstName: 'Woo',
  lastName: 'JongHyuk'
};

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

JSX도 표현식입니다.

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

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

JSX 속성 정의

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

const element = <a href="url"> link </a>;

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

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

JSX로 자식 정의

JSX 태그는 자식을 포함할 수 있습니다.

const element = (
  <div>
    <h1>안녕하세요</h1>
    <h2>우종혁입니다.</h2>
  </div>
)

JSX는 주입 공격을 방지합니다.

JSX에 사용자 입력을 삽입하는 것은 안전합니다.

const title = response.name;

const element = <h1>{title}</h1>

ReactDOM은 JSX에 삽입된 모든 값을 렌더링하기 전에
이스케이프 하므로, 어플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않습니다.
모든 항목은 렌더링 되기 전에 문자열로 변환됩니다.
이런 특성으로 인해 XSS 공격을 방지할 수 있습니다.

참고한 문서

• 리액트 공식 문서