리액트 강좌3 - JSX

요번 강좌에서는 자바스크립트의 확장형인 JSX에 대해서 알아보도록 하겠습니다. 또한, JSX에서 사용하는 조건부 연산과 자바스크립트 표현에 대해서 간략하게 살펴보겠습니다.

 

1. 코드 이해

Node.js의 주요 특징은 코드를 모듈화하여 재사용할 수 있다는 것입니다. Node의 내장된 모듈을 사용하거나, 자신의 코드를 모듈화 하여 재사용할 수 있습니다. 또한 남들이 만든 모듈도 npm 을 이용해서 쉽게 적용할 수 있습니다.이렇게 설치된 모듈은 import라는 키워드를 사용해서 불러와서 사용할 수 있습니다.

 

하지만 이는 Node.js의 기능이기 때문에 자바스크립트에서 이 기능을 지원하지 않습니다. 이러한 기능을 사용하기 위해서는 번들링(bundling) 도구를 이용해야 합니다. 번들은 파일을 묶는다는 의미로 필요한 파일들을 번들링 도구를 이용해서 하나의 번들 파일로 묶어 줍니다. 주로 webpack을 많이 사용하는 추세인데요. 다른 도구보다 확장성이나 편의성이 뛰어나다고 합니다.

 

필요한 파일들을 webpack 로더를 통해서 불러 올 수 있습니다. 로더는 여러가지 종류가 있습니다. CSS파일을 불러올 때 사용하는 css-loader, 웹 폰트나 미디어 파일을 불러오는 file-loader 등이 있습니다. 또한, babel-loader는 js파일을 불러 오면서 ES6로 작성된 코드를 ES5 문법으로 치환해주는 역할을 합니다.

 

2. JSX란

JSX는 자바스크립트의 확장 문법으로 XML과 비슷하게 생겼습니다. 이런형식으로 작성한 코드는 나중에 번들링되면서 babel-loader를 사용하여 자바스크립트로 변환합니다. 

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

위에는 JSX 사용예입니다. 

 

그렇다면 JSX는 어떤 장점이 있는지 알아 볼까요?

• JSX는 컴파일되면서 최적화되기 때문에, 빠릅니다.
• HTML에 익숙하다면 작성하기 쉽습니다.
• 가독성이 높고 작성하기 편합니다.
• 기존 HTML과 달리 에러 감지가 수월합니다.

3. Nested Elements 

JSX에는 필수적으로 준수해야 하는 규칙이 있습니다. 그 중 하나가 컴포넌트가 여러개라면 한개의 부모로 감싸여야 한다는 것입니다. 

import React from 'react'

class App extends React.Component {
    render() {
        return (
            <h1>Hello React!</h1>
            <h2>Welcome!</h2>
        )
    }
} 

export default App

위와 같은 코드로 실행하면 어떻게 될까요?

아래 같이 JSX 엘리먼트가 제대로 enclosing tag로 감싸지지 않았다고 에러가 발생합니다. 이게 앞서 말한 HTML 코드랑은 차이점이라고 할 수 있습니다.

Failed to compile.

./src/App.js
  Line 7:13:  Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

   5 |         return (
   6 |             <h1>Hello React!</h1>
>  7 |             <h2>Welcome!</h2>
     |             ^
   8 |         )
   9 |     }
  10 | } 

 

아래와 같이 <div></div>코드로 감싸주게 되면 발생했던 오류가 사라지는 걸 볼 수 있습니다. (리액트 v16 이상에는 Fragment 컴포넌트가 도입되어 div 대신에 <Fragment></Fragment>로 감싸 주어도 됩니다. 하는 역할은 div와 동일합니다.)

import React from 'react'

class App extends React.Component {
    render() {
        return (
          <div>
            <h1>Hello React!</h1>
            <h2>Welcome!</h2>
          </div>
        )
    }
} 

export default App

 

Compiled successfully!

You can now view hello-react in the browser.

  Local:            http://localhost:3000/

Note that the development build is not optimized.
To create a production build, use yarn build.

 

Hello React!

Welcome!

 

하지만, 왜 꼭 부모 엘리먼트로 감싸야 할까요? 이유는 Virtual DOM 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 DOM 트리 구조가 하나여야 한다는 규칙이 있기 때문입니다.

 

4. 자바스크립트 표현

JSX는 표현식입니다. 컴파일이 끝나면, JSX표현식이 정규 자바스크립트 함수 호출이 되고 자바스크립트 객체로 인식됩니다. 자바스크립트 표현식을 작성하려면 JSX 내부에서 코드를 { }로 감싸면 됩니다. 

아래와 같이 name이라는 변수를 선언하여 값을 넣어주고 JSX 코드에 {name} 으로 표현하였습니다.

import React from 'react'

class App extends React.Component {

    render() {
      const name = "hong gildong"
        return (
          <div>
            <h1>Hello React!</h1>
            <h2>Welcome! {name}</h2>
          </div>
        )
    }
} 

export default App

 

Hello React!

Welcome! hong gildong

 

그럼 위와 같은 결과가 표시되는 것을 확인할 수 있습니다.

 

5. 조건부 연산자 

JSX 내부에서는 if문을 사용할 수 없습니다. 그렇기 때문에 JSX내에서 조건문을 작성하려면 JSX 밖에서 if문을 작성하던지, JSX내에서는 {} 내부에 삼항 연산자를 사용하면 됩니다.

아래 예제는 JSX 밖에서 if 문을 이용해서 표현한 방법입니다. welcome 변수에 따라서 출력 되는 화면이 다르게 표시됩니다.

class App extends React.Component {
  
  render() {
    const welcome = true

    if(welcome) {
      return (
        <div>
          <h1>Hello React!</h1>
          <h2>환영!</h2>
        </div>
      )
    } else {
      return (
        <div>
          <h1>Hello React!</h1>
          <h2>환영 하지 않음!</h2>
        </div>
      )
    }
  }
} 

아래 예제는 삼항 연산자를 이용해서 분기를 시킨 예제입니다. 위의 예제와 동일하게 welcome에 따라서 출력되는 메시지가 다릅니다.

class App extends React.Component {
  
  render() {
    const welcome = true

    return (
      <div>
        <h1>Hello React!</h1>
        <h2>
        {
          welcome ? '환영' : '환영하지 않음'
        }
        </h2>
      </div>
    )
  }
} 

 

두 예제를 비교해보면 아래 삼항 연산자를 사용해서 표현하는 방법이 조금 더 간편해 보입니다. 물론 JSX 내부에 함수로 조금 더 간편하게 표시 하는 방법이 있긴 하지만, JSX 내부에는 삼항 연산자를 사용하는 것이 간편하고 가독성 또한 좋습니다.

 

추가로 && 연산자를 이용해서 더욱 간편하게 표시하는 방법이 있습니다. JSX에서는 null 값 이외에도 false 값을 렌더링하면 아무것도 나타나지 않습니다. 그렇기 때문에 아래와 같은 예제로 간편하게 표시할 수도 있습니다.

class App extends React.Component {
  
  render() {
    const welcome = true

    return (
      <div>
        <h1>Hello React!</h1>
        <h2>
        {
          welcome && '환영'
        }
        </h2>
      </div>
    )
  }
} 

하지만, 조건부 연산자와는 달리 한가지 값에 대해서는 참, 거짓을 판별할 수 있기 때문에 사용이 제한적입니다. if 문, 삼항연산자, && 연산자는 사용에 따라 적절하게 선택해서 사용하시면 됩니다.

 

6. 주석

JSX 주석은 자바스크립트에서 작성할 때랑 조금 다릅니다.

class App extends React.Component {
  
  render() {
    const welcome = true

    //방법1. 이건 JSX 밖에서 사용하는 주석입니다.
    return (
      <div>
        <h1>Hello React!</h1>
        {/* 방법2. 이건 JSX 안에서 사용하는 주석입니다! */}
        <h2 /** 방법3. 이렇게도 사용 가능합니다. */>
        {
          welcome && '환영'
        }
        </h2>
      </div>
    )
  }
} 

6번째 라인에 보시면 일반적인 주석인 // 형태입니다. JSX 밖에서는 이와 같이 사용하며, JSX 내부에는 {/* */} 형태로 작성할 수 있습니다. 그리고 방법3 처럼 태그 안에서는 { } 없이도 주석 사용이 가능합니다.