[스터디 - 리액트를 다루는 기술] 2주차 - JSX 요약정리

JSX 란?

 

자바스크립트의 확장 문법

 

JSX는 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼습니다. 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다.

 

 

JSX 코드 변환 전

function App() {
  return (
    <div>
    	Hello <b>react</b>
    </div>
 );
}

위와 같이 작성된 코드는 아래와 같이 변환됩니다.

function App() {
  return React.createElement("div", null, "Hello ", React.createElement("b", null, "react"));
}

아래와 같은 createElement 같은 코드를 매번 작성하기 불편하기 때문에 React에서는 JSX를 사용하여 UI를 렌더링 하는 것입니다.

 

JSX의 장점

 

1. 보기 쉽고 익숙하다.

  - HTML 코드를 작성하는 것과 비슷하기 때문에 사용하기가 훨씬 쉽고, 익숙합니다.

 

2. 더욱 높은 활용도

  - div, span 과 같은 HTML 태그 뿐만 아니라 직접 만든 컴포넌트 태그도 사용할 수 있기 때문에 활용도가 높다!

 

 

JSX의 문법

 

JSX를 사용하기 위해서는 몇가지 규칙을 지켜야 합니다.

 

1. 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 합니다.

 

(그런데, 여기에는 리액트 16 이상 부터 등장한 편법이 존재합니다. <></> 와 같이 Fragment 라는 빈 태그로 감싸주는 방법입니다.)

 

보통은 아래와 같이 div 와 같은 부모요소로 감싸서 해야하지만,

 

import React from 'react'

function App() {
  return (
    <div>
      <h1> 리액트 안녕! </h1>
      <h2> 잘 작동하니? </h2>
    </div>
  );
}

export default App;

 

<div> 요소를 사용하고 싶지 않은 경우 리액트 v16 이상부터 제공하는 Fragment라는 기능을 사용하면 됩니다.

(Fragment 태그를 생략하고 <> </> 빈 태그로 감싸주는 방법도 가능합니다)

 

import React, { Fragment } from 'react';

function App() {
  return (
    <Fragment>
      <h1> 리액트 안녕! </h1>
      <h2> 잘 작동하니? </h2>
    </Fragment>
  );
}

export default App;


import React, { Fragment } from 'react';

function App() {
  return (
    <>
      <h1> 리액트 안녕! </h1>
      <h2> 잘 작동하니? </h2>
    </>
  );
}

export default App;

// 위 아래는 동일한 코드입니다.

 

2. 자바스크립트 표현

 

JSX 에서 자바스크립트 표현식을 작성하려면 JSX 내부에서 코드를 { }로 감싸면 됩니다.

 

import React from 'react';

function App() {
  const name = '리액트';
  return (
  <>
    <h1>{name} 안녕! </h1>
    <h2>잘 작동하니?</h2>
  </>
 );
}

export default App;

 

3. If문 대신 조건부 연산자

 

JSX 내부의 자바스크립트 표현식에서 if 문을 사용할 수는 없습니다. 하지만 조건에 따라 다른 내용을 렌더링해야 할 때는 JSX 밖에서 if 문을 사용하여 사전에 값을 설정하거나, { } 안에 조건부 연산자를 사용하면 됩니다.

조건부 연산자의 또 다른 이름은 삼항 연산자 입니다.

import React from 'react';

function App() {
  const name = '리액트';
  return (
    <div>
      {name === '리액트' ? (
        <h1> 리액트입니다. </h1>
      ) : (
        <h2> 리액트가 아닙니다. </h2>
      )}
    </div>
  );
}

export default App;

 

 

4. AND 연산자 (&&)를 사용한 조건부 렌더링

import React from 'react';

function App() {
  const name = '뤼액트';
  return <div> {name === '리액트' && <h1> 리액트입니다. </h1>} </div>
}

export default App;

&& 연산자를 조건부 렌더링에 사용할수 있는 이유는 리액트에서 false를 렌더링 할때는 null과 마찬가지로 아무것도 나타나지 않기 때문입니다. 여기서 주의 할점은 falsy한 값인 0은 예외적으로 화면에 나타난다는 것 입니다.

 

 

5. undefined를 렌더링하지 않기

 

리액트 컴포넌트에서는 함수에서  undefined만 반환하여 렌더링하는 상황을 만들면 안됩니다.

import React from 'react';
import './App.css';

function App() {
  const name = undefined;
  return name;
}

export default App;

반면 JSX 내부에서 undefined를 렌더링하는 것은 괜찮습니다.

import React from 'react';
import './App.css';

function App() {
  const name = undefined;
  return <div> {name || '리액트' } </div>
}

export default App;

 

6. 인라인 스타일링

 

리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어 주어야 합니다.

스타일 이름은 카멜 표기법으로 작성해야 합니다.

 

import React from 'react';

function App() {
  const name = '리액트';
  const style = {
   // background-color는 backgroundColor와 같이 - 가 사라지고 카멜 표기법으로 작성됩니다.
   backgroundColor : 'black',
   color: 'aqua',
   fontSize: '48px', // font-size -> fontSize
   fontWeight: 'bold', // font-weight -> fontWeight
   padding: 16 // 단위를 생략하면 px로 지정됩니다.
 };
  return <div style={style}>{name} </div>
}

export default App;

지금까지는 style객체를 미리 선언하고 div로 style 값을 지정해주었지만

style 객체를 미리 선언하지 않고 바로 style 값을 지정하고 싶다면 다음과 같이 작성해야 합니다.

 

import React from 'react';

function App() {
  const name = '리액트';
  return (
   <div
     style={{
   	  // background-color는 backgroundColor와 같이 - 가 사라지고 카멜 표기법으로 작성됩니다.
      backgroundColor : 'black',
      color: 'aqua',
      fontSize: '48px', // font-size -> fontSize
      fontWeight: 'bold', // font-weight -> fontWeight
      padding: 16 // 단위를 생략하면 px로 지정됩니다.
    }}
   >
     {name}
   </div>
  );
}

export default App;

 

7. class 대신 className 사용

 

일반 HTML에서는 CSS 클래스를 사용할 때 class를 사용, JSX에서는 class 대신 className 사용

 

import React from 'react';
import './App.css';

function App() {
  const name = '리액트';
  return <div className = "react"> {name} </div>;
}

export default App;

 

8. 태그가 반드시 닫혀있어야 함

import React from 'react';
import './App.css';

function App() {
  const name = '리액트';
  return (
  <>
    <div className="react">{name}</div>
    <input>
  </>
 );
}

export default App;

태그가 닫혀있지 않으면 오류가 발생합니다. (Failed to compile.) 

위의 오류를 해결하려면 <input>태그를 닫아주어야 합니다.

 

9. 주석

 

JSX 안에서 주석을 작성하는 방법은 일반 자바스크립트에서 주석을 작성할 때와 조금 다릅니다.

import React from 'react';
import './App.css';

function App() {
  const name = '리액트';
  return (
    <>
      {/* 주석은 이렇게 작성합니다. */}
      <div
        className="react" // 시작 태그를 여러 줄로 작성하게 된다면 여기에 주석을 작성할 수 있습니다.
      >
        {name}
      </div>
      // 하지만 이런 주석이나
      /* 이런 주석은 페이지에 그대로 나타나게 됩니다 */
      <input />
    </>
  );
}

export default App;

위의 코드의 설명대로 JSX에서 주석을 작성할 때에는 { /*   */ } 형태로 주석을 작성해야 합니다.