JSX란 무엇인가? (React 기초)

JSX 변종인가!?

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

위의 코드를 보면 무슨 생각이 드는가?

 

오른쪽만 보면 평범한 HTML코드이다.

그런데, 언제부터 HTML을 변수에 집어넣을 수 있었지?!

 

나와 같은 의문을 품었다면, 당신도 나와같은 동류다.

(??? : 도대체 왜 마크업 언어를 변수에 집어넣는거야!!)

 

이렇게 의문을 품었더라도, 이 글을 다 읽을 때 쯤 아 그래도 JSX가 뭔지 알겠다 싶을 수 있도록 아래 열심히 설명해보겠다.

---

그래서 JSX가 뭐냐

JSX == JavaScript + XML

말 그대로, JSX는 JavaScript에 XML을 얹은 친구이다.

XML이 무엇인지 궁금한 분들은 이 링크를 한번 읽고오면 좋다.

 

그렇다면, 이 친구는 어떤 특징 그리고 장단점을 가지고 있을까?

 

특징

1. React 쓸 때 꼭 사용해야되는 것은 아니지만..! 쓰면 엄청 편해서 매우 권장됨

2. JSX는 XML규칙을 따른다.

3. JSX를 통해서 우리는 React element를 만들 수 있다.

4. Expression을 쓸 때는 JS처럼 {}으로 묶으면되며, 큰 블록을 넣을 때에는 ( )으로 묶어주면 된다.

5. 컴파일 된 후, JSX Expression은 일반적인 JS 함수처럼 사용된다.

6. 이름 지을 때에는 camelcase로 작성해야된다.(helloWorld from simSimHamStudy blog)

    - 맨 앞글자를 소문자로 그리고 뒤에 붙는 단어의 맨 앞글자는 대문자로 표시한다!

 

장점

1. 앞에 작성한 것처럼 React 사용할 때 매우매우 편해진다

2. HTML 태그들을 쉽게 React element로 변환할 수 있다.

3. 그냥 JS보다 빠르다!(정말?!)

4. DOM에 appendChild() 혹은 createElement()를 쓰지 않고도 넣을 수 있다.

5. JSX expression 안에서 제어문들(if, for 등등)을 사용할 수 있다.

6. XSS(cross-site-scripting)공격을 막아준다!!(XSS란? 링크)

7. type-safe하기 때문에 대부분의 오류들은 컴파일할 때 잡을 수 있다!

 

단점

1. HTML이 정확하지 않으면 에러를 뱉는다.(태그 잘 닫아주고 element로 잘 감싸줘야된다) 

 

장점은 많고, 단점은 적은(사실 이건 버그 줄일 수 있어서 단점인가 싶지만) JSX 어떻게 쓰는지도 한번 알아보자

---

간단한 JSX 실습

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

짜잔, 우리는 jsx파일에서 이 간단한 2줄로 이름을 바꾸며 element를 만들어낸 간단한 JS객체를 만들어봤다.

 

React에는 Component와 Element라는 두 친구가 존재하는데, 이 친구들은 붕어빵틀과 붕어빵 이 친구들의 관계와 같다.

Component는 이 Element를 찍어내는 틀인 것이다.

(React는 이 컴포넌트에서 계속 다른 친구들을 찍어냄으로써 브라우저 내용을 바꾼다)

 

여기에서는 "Hello, {특정 이름}" 의 Element를 찍어내는 것을 볼 수 있다.

 

또, JSX안에서는 자식을 둘 수도 있다.(div 안에 h1 혹은 h2같은 태그)

const element = (
  <div> //div시작
    <h1>Hello!</h1> //div의 자식들
    <h2>Good to see you here.</h2> //div의 자식들
  </div> //div 끝!
);

 

JSX는 매우매우 간단하게 이런 element를 만드는 틀을 우리에게 제공해줍니다.

 

---

한발자국 더 나아간 실습

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

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

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

이런식으로 작성하면, 우리는 JS를 통해서 마크업 언어를 그리고 React element를 효과적으로 변경할 수 있습니다.

 

이 element 친구는

1. user의 데이터를 formatName함수로 변환시키고 

2. 그 변환된 이름(여기에서는 Harper Perez)를  Hello, {이름 위치}에 넣고

3. 그 후 Hello, Harper Perez라는 React element로 만들어 DOM에 넣어줍니다.

 

이것저것 많이 보긴했지만, 잘 모르시겠다고요?

그렇다면 아직 DOM, Component, Element 등등 React 갈길이 멀어서 그렇습니다.

 

[헷갈리는 당신을 위한 JSX 한 줄 요약]

React element를 편하게 만들 수 있게 도와주는 JS + XML 툴

(필수는 아니나, 쓰면 매우 편안하다)