[React] React JSX

1. JSX

※ JSX 는 자바스크립트 확장 문법입니다.

React 에서 이벤트가 처리되는 방식, 시간에 따라 state 가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI 로직과 연결된다는 사실을 알아야합니다.

 

React 는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 컴포넌트를 이용해 느슨하게 연결됩니다.

 

React JSX 사용은 필수가 아닙니다. 

Javascript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 될 것입니다.

또 React 가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다.

 

// JSX 코드
var a = {
    <div>JSX 코드</div>
}

// 바벨 코드
var a = React.createElement(
    'div',
    null,
    '바벨 코드'
);

JSX 는 html 코드를 직접 입력하는 것과 같은 형식으로 볼 수 있습니다.

 

• babel-loader 를 사용하여 자바스크립트로 변환 할 수 있습니다.
• JSX 는 리액트용이기 때문에 공식 자바스크립트 문법은 아닙니다.

1. JSX 장점

1. 보기 쉽고 익숙하다

html 코드를 작성하는 것과 비슷하기 때문에 가독성이 높고 작성하기 쉽습니다.

 

2. 오류 검사

바벨이 코드를 변환하는 과정에서 JSX에 오류를 미리 감지합니다.

 

3. 높은 활용도

ReactDOM.render( <App />, document.getElementById('root') );

컴포넌트를 마치 html 태그 쓰듯이 사용할 수 있습니다.

 

4. XSS 공격 방지

JSX 에 사용자 입력을 삽입하는 것은 안전합니다.

const title = response.potentiallyMaliciousInput;
// 안전합니다.
const element = <h1>{title}</h1>;

기본적으로 React DOM 은 JSX 에 삽입된 모든 값을 렌더링하기 전에 이스케이프를 하기 때문에 애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않습니다. 모든 항목은 렌더링 되기 전에 문자열로 변환합니다. 이런 특성으로 인해 XSS(Cross-site-scriptting) 공격을 방지할 수 있습니다.

 

2. JSX 문법

1. 감싸인 요소

// 에러
class App extends Component {
    render() {
        return (
            <p>
                Text!
            </p>
        );
    }
}

// 정상
class App extends Component {
    render() {
        return (
            <div className="App">
                <p>
                    Text!
                </p>
            </div>
        );
    }
}

Virtual DOM 에서 컴포넌트 변화를 감지할 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 DOM 트리 구조 하나여야한다는 규칙이 있기 때문입니다.

 

※ <코드></코드> 코드는 꼭 닫아야합니다. <br>, <hr> 태그는 웹 브라우저에서 보일 때는 전혀 문제가 없습니다. 하지만 JSX 에서는 닫지 않고 작성할 경우 Virtual DOM 에서 트리 형태의 구조를 만들지 못하기 때문에 에러가 발생합니다. <br />, <hr /> 로 꼭 태그를 닫아주셔야합니다.

 

2. Framgment

감싸인 요소에서 알 수 있듯 div 태그를 이용해 감싸야하는 것을 알 수 있습니다. 하지만 div 태그가 불필요할 경우에 대해서 처리하는 방법입니다.

class Table extends Componet {
    render() {
        return (
            <table>
                <tr>
                    <Columns />
                </tr>
            </table>
        );
    }
}

class Columns extends Component {
    render() {
        return (
            <td>Hello</td>
            <td>World</td>
        );
    }
}

위 코드는 정상적으로 동작하지 않습니다.

class Columns extends Component {
  render() {
    return (
      <div>
        <td>Hello</td>
        <td>World</td>
      </div>
    );
  }
}

div 태그를 감싼다면 정상적으로 동작하게 되지만 div 태그에 감싸여 반환하게 됩니다.

<table>
  <tr>
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  </tr>
</table>

이럴 때 Fragment 태그를 이용해 불필요한 div 태그를 렌더링하는 것을 생략할 수 있습니다.

class Columns extends Component {
  render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    );
  }
}

<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>

단축 문법은 아래와 같습니다.

Fragments를 선언하는 더 짧고 새로운 문법이 있습니다. 마치 빈 태그와 같습니다.

class Columns extends Component {
  render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    );
  }
}

 

3. 데이터 전달

import React, {Component} from 'react';

class App extends Component {
    render() {
        const txt = 'Hello';
        return (
            <div>
                <h1>안녕하세요</h1>
            	<h2>{txt}</h2>
            </div>
        );
    }
}

{} 를 이용해 자바스크립트 값을 JSX 안에서 렌더링 할 수 있습니다.

※ ES6 의 const, let

• const - 변경 불가능한 상수
• let - 동적인 값을 담을 수 있는 변수

4. inline CSS

자바스크립트 객체 형식을 만들어 적용할 수 있습니다.

해당 객체에서 key 는 camelCase로 작성합니다.

import React, { Component } from 'react';

class App extends Component {
    render() {
        const txt = 'Hello!';
        const style = { 
            backgroundColor : 'gray'
        };

        return (
            <div>
                <h1>안녕하세요</h1>
                <h2 style={style}> {txt}</h2>
            </div>
        );
    }
}

export default App;

 

5. 조건부 연산자

JSX 내부에서 if문을 사용할 수 없습니다. JSX 밖에서 if 문을 사용하거나 삼항연사자를 사용하면 됩니다.

import React, { Component } from 'react';

class App extends Component {
    render() {
        const txt = 'Hello!';
        const condition = true;
        const style = { 
            backgroundColor : 'gray'
        };
        return (
            <div>
                <h1>안녕하세요</h1>
                <h2 style={style}> {txt}</h2>
                { 
                    condition ? '참' : '거짓'
                }
            </div>
        );
    }
}

export default App;

 

6. 주석

JSX 에서 주석을 사용하는 방법입니다.

import React, { Component } from 'react';

class App extends Component {
    render() {
        const txt = 'Hello!';
        const condition = true;
        const style = { 
            backgroundColor : 'gray'
        };
        return (
            <div>
                {/* 요소 밖의 주석 */}
                <h1 // 요소 내부 주석 
                        /* 블럭주석 */
                >안녕하세요</h1>
                <h2 style={style}> {txt}</h2>
                { condition ? '참' : '거짓' }
            </div>
        );
    }
}

export default App;