JSX

Yeom Jae Seon·2021년 1월 29일

JSX React

React공식문서 공부

목록 보기

1/11

JSX란?

JSX : JavaScript XML의 약자로, React에서 사용하는 JavaScript 확장 언어이다.

React에서는 JSX가 필수는 아니지만 시각적으로 더 좋고, React가 경고나 에러메시지를 표시할수 있게 해준다.

시각적으로 더 좋다면 무엇보다?

JSX가 나오기 이전에는 React에서는 React.createElement()만 사용되었다.

const hi = <div>안뇽</div>

const hi = React.createElement('div', {}, '안뇽');

위 두 문장은 아애 같은 문장이다.

예시코드가 간결해서 가독성이 더좋은지 딱히모를수도 있지만 코드의 길이가 이것의 100배가 된다고 생각해보자.
JSX가 더 가독성이 좋다.

이 것이 JSX의 이점이라 할수 있겠다.

JSX에서 표현식 사용하기

JSX내에서 {}를 이용해서 Javascript 표현식을 사용할수있다.

  const hi = <div>안뇽 {10 * 3} </div>;

이렇게 중괄호 안에서 JavaScript표현식을 사용할수있다.

JSX도 표현식이다.

결론부터 말하면 JSX는 Babel에 의해 React.CreateElement() 로 트랜스파일링이 되는데 이 React.createElement()는 하나의 객체를 리턴한다.
즉, JSX는 객체이다.
그러므로 JSX를 if문안에서라던지 for loop 안에서라던지 사용할수 있다.

if문에서 JSX사용

  const hi = (boom) => {
    if (boom) {
      return <div>안뇽 {10 * 3} </div>;
    } else return <div>잘가 {10 * 3} </div>;
  };

for loop 내에서 JSX사용

  const hi = () => {
    for (let i = 0; i < 3; i++) {
      return <div>안뇽 {10 * 3} </div>;
    }
  };

이 모두는 JSX가 객체 이기 때문에 가능하다.
위 코드의 JSX대신 다른 객체,
const obj = {id : 1, name:'jaeseon'};
의 obj가 대신 있다해서 어색할게 없다!..
JSX와 객체는 같다는걸 받아들여야 한다.
먼저 스포하자면 이 객체는 React 엘리먼트이고
어떻게 생겼는지는 아래에서 다루겠다.

JSX 속성정의

JSX에서 속성사용하는 방법은 두가지다.
1. "" 사용
const hi = <div tabIndex="0">안뇽 </div>;
2. {} 사용
const hi5 = <img src={name}/>

JSX에서 어트리뷰트(속성) 사용하는것도 {}를 통해서 JSX내에서 표현식 사용하는 것과 똑같다.

그렇게되면 JSX속성에 함수를 넣어서 JSX의 속성정의도 무언가 동적으로 할수있겠다..
예를들면 input의 readOnly속성을 동적으로 추가 삭제할수 있는 함수를 넣어 동적으로 해당 속성을 활성, 비활성화 시킬수있겠다.
readOnly 속성같은 경우는 true나 false를 통해서 활성화 비활성화가 된다.

JSX로 자식 정의

HTML을 사용할때와 같이 자식 태그가 있을 수도 있는 것처럼 JSX에서도 자식 JSX가 존재할수도 있다.

  const hi = (
    <div>
      안뇽
      <h1>잘가</h1>
    </div>
  );

HTML이나 XML에서 < /> 바로 태그를 닫는것처럼 JSX에서도 바로 태그를 닫을수 있다.
const hi5 = <img src={name}/>

JSX는 객체를 표현한다.

위에서도 언급했던 내용이다. JSX는 Babel에의해 React.createElement()로 트랜스파일링 된다.

결국 트랜스파일링된 (위의 예시에서 코드 가져다쓰면)

 const hi = React.createElement('div', {}, '안뇽');

요녀석이

결국은!
console.log(hi)
console.log(<div>안뇽</div>)
console.log(React.CreateElement('div', {}, '안뇽');
!! 콘솔에 찍어보면 !!
(위 세 문장은 이제 같은걸 의미하는줄 알겠다.)

이런 객체를 리턴한다.
JSX -> (바벨에의해 트랜스파일링) React.createElement() : 이녀석이 객체이다.
여기서 말하는 객체는 바로 React 엘리먼트 라고 한다.
React는 이 객체, React 엘리먼트를 DOM으로 구성하게 되어 브라우저 위에 존재하게 되는것이고 결국 우리눈에 보이는 것이다.

이젠 JSX는 객체를 표현한다를 이제 이해할수 있고
엘리먼트가 자세히 뭔지는 다음장에서 ! 다루겠다.

React 공식문서를 보고 공부한 내용입니다.
https://ko.reactjs.org/docs/introducing-jsx.html

Yeom Jae Seon

다음 포스트

JSX