React.js - JSX란?

JavaScript eXtension이란 무엇일까??

0.  JSX란?

JSX란 JavaScript eXtension의 줄임말로써 HTML태그 (div, h1, h2 등)들을 자바스크립트 소스코드 안에 사용하는 것을 뜻한다. JSX로 작성된 코드들은 빌드될 때, Babel이 자바스크립트 코드로 변환시켜준다.

 

1.  장점

• XML형식과 문법이 유사하여 중첩된 태그들의 구조를 파악하기 쉽다.
• createElement등의 태그들을 만드는 문법을 사용하지 않고 직접 태그들을 선언하기에 코드의 양이 감소한다

 

2.  특징 및 유의점

• 리액트와 궁합이 잘맞기에 함께 사용하는 것이 권장된다.
• 변수 선언 또는 출력시, {}로 변수를 감싸줘야한다.
• class와 for속성 대신, className, htmlFor라는 속성으로 이름이 바뀐다.
• <div></div>처럼 태그가 닫혀있지 않는 경우에는 오류가 발생한다.
• <input />, <br /> 처럼 하나의 태그 안에서 열고 닫기를 할 수 있다.
• 주석은   {/* 주석에 담을 내용 */}
• 여러 개의 엘리먼트들은 무조건 하나의 엘리멘트가 감싸고 있어야 한다.

 

3.  사용법

• 기본 사용법

const jsx = (
  <div>
    <h1>첫번째 헤드라인</h1>
    <h2>두번째 헤드라인</h2>
    <div>
      <h3>세번째 헤드라인</h3>
    </div>
  </div>
);

 

div태그 또는 다른 태그를 통해 감싸줘야한다. 즉, 하나의 태그 안에 다른 태그들이 존재해야한다.

태그를 감싸지 않은 채 여러개의 태그를 나열하는 식으로 사용하면 에러가 발생한다.

 

const test2 = (
  <>
    <h1>첫번째 헤드라인</h1>
    <h2>두번째 헤드라인</h2>
    <div>
      <h3>세번째 헤드라인</h3>
    </div>
  </>
);

 

또는 마땅히 감쌀태그가 없을 경우, <></>로 감싸도 된다.

 

<input type="text" className="type" value="인풋태그" />

 

기존 HTML에서는 input태그를 닫지 않았다. 하지만 리액트의 JSX에서는 input태그의 마지막에  /> 를 사용하여 태그를 닫아줘야 한다.

 

 

• 주석

const test = (
  <div>
    {/* 주석입니다 */}
  </div>
);

 

 

• 자바스크립트 코드 사용

const Test = (
  const value = "basic value";
  const custom = {
    color: 'blue',
    fontSize: '10px',
    border: 1px solid black,
  };
  
  return (
    <div name"customStyle" style={ custom } >
      <h1 name="value" >{ value }</h1>
    </div>
  );
);

 

h1태그의 name이 value인 부분에는 value라는 변수의 값을 출력한다.

div태그의 name이 customeStyle인 부분에는 위에서 선언한 custom스타일이 적용된다.

 

 

4. return

export default Test;

 

여러개의 함수또는 변수 중에서 특정한 하나를 default로 지정하여 내보낸다. 이렇게 지정된 컴포넌트는 다른 컴포넌트에서 불러와 사용할 수 있게된다.