JavascriptReact.jsJSX

JSX 사용하기

javascript, jsx, react.js

JSX란?

JSX란? Javascript와 xml의 합성어로 jsx라는 이름이 생겼다. 기존의 XML을 허용하기 위해서 사용하는 Javascript 확장 문법이다.

JSX의 특징

  1. 빠르다. (컴파일 되면서 최적화가 되기 때문에)
  2. 익숙하다. (XML이나 HTML에 익숙하면 금방 JSX를 익힐 수 있다.)
  3. 의미를 잘 나타낸다. (Javascript 코드를 마크업 형태로 만들 수 있다.)
  4. 코드가 읽기 쉽고 간결해 진다.
  5. 서로 다른 Javascript를 사용해도 같은 JSX를 지원할 수 있다. (transfiler를 사용하기 때문에)
1
2
3
4
5
// jsx를 쓰지 않을 경우
React.createElement('div', {class: wrapper});
// jsx 문법
<div class="wrapper"></div>

JSX의 문법

1. return 요소 내부에는 하나의 element로 wrapping 되어야 한다.

1
2
3
4
5
6
7
8
9
10
// 오류
// return 하는 element는 하나의 element로 감싸여 있어야 한다.
class App extends React.Component {
  render(){
    return(
        <h1>Hello, React</h1>
        <p>My first Component</p>  
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
// 정상작동 
class App extends React.Component {
    render(){
      return(
          <div>
            <h1>Hello, React</h1>
            <p>My first Component</p>  
          </div>
      );
    }
}

2. Javascript 표현시에는 {}안에 Javascript 표현식을 넣는다.

1
2
3
4
5
6
7
8
9
10
11
12
13
class App extends React.Component {
    render(){
      let msg = "My first Component";
      return(
          <div>
            <h1>Hello, React</h1>
            <p>{msg}</p>
            <p>{ msg ? 'true' : 'false'}</p>
            <p>{/* comment */}</p>
          </div>
      );
    }
}

if ~ else 같은 경우는 사용 불가능 하기 때문에 삼항 연산자를 써야한다.
comment 작성시에는 {/* comment */} 형식으로 써야 한다.
comment 또한 하나의 element로 wrapping 되어야 한다.

3. inline 스타일을 적용하는 경우에는 key가 camelCase인 json 형식의 변수가 사용된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class App extends React.Component {
    render(){
      let msg = "My first Component";
      let style = {
        fontSize : '20px',
        backgroundColor: '#181818',
        borderRadius: '10px',
      }
      return(
          <div>
            <h1 style={style}>Hello, React</h1>
            <p>{msg}</p>
            <p>{ msg ? 'true' : 'false'}</p>
            <p>{/* comment */}</p>
          </div>
      );
    }
}
Share