JSX (React Component)

JSX

React에서는 Javascript 문법이 아닌 JSX문법을 사용해서 UI를 만든다.

JSX의 특징

1. 빠르다. (컴파일)

2. Type-safe 다. (예측불가능한 결과를 내지 않는다. 쉽게 얘기하면 타입에 엄격)

1
2
3
4
5
6
7
8
9
10
import React from 'react';
 
class App extends React.Component {
    render(){
        return (
                <h1>jeong-pro blog</h1>
        );
    }
}
export default App;

[App.js]

import React from 'react'는 ES6문법으로 var React = require('react')와 같다.

React 모듈은 Component를 만들 때 사용한다.

class 도 ES6문법으로 이전에는 클래스를 느낌만 주고 prototype을 사용해서 만들었지만 지금은 위와 같이 사용하면 된다.

render()메서드는 컴포넌트에 렌더링 될 데이터를 정의한다. (<h1>jeong-pro blog</h1>)

* 예전에는 return안에서 반드시 container element 안에 포함시켜서 했어야 했는데 지금은 key 값을 줘서 요소를 구분하면 된다.

1
2
3
4
5
6
7
8
9
10
11
12
import React from 'react';
export default class App extends React.Component {
  render() {
    return (
      <div>
        <h1>jeongpro blog</h1>
        <p>안녕하세요</p>
        <span>정프로 블로그 입니다.</span>
      </div>
    );
  }
}
Colored by Color Scripter

무슨말이냐면 이런식으로 h1, p, span등의 태그들을 사용할 때 <div>로 감싼 것처럼 container element안에 포함시켰다는 얘기다. 이렇게 하지 않으면 에러가 났었다.

그런데 이제는 아래처럼 key로 구분하면 사용이 가능하다. (React 16 이상 기준.)

* render()의 return문에서 [ ] 배열로 리턴하는 것 유의

1
2
3
4
5
6
7
8
9
10
import React from 'react';
export default class App extends React.Component {
  render() {
    return [
        <h1 key="a">jeongpro blog</h1>
        <p key="b">안녕하세요</p>
        <span key="c">정프로 블로그 입니다.</span>
    ];
  }
}
Colored by Color Scripter

JSX에서 javascript 표현하기

1
2
3
4
5
6
7
8
render(){
        let name = "Username"
        return  (
            <div>
                <h1> Welcome to {name}</h1>
            </div>
        );
    }
Colored by Color Scripter

변수가 있으면 render()메서드 안에서 정의하고 { } 를 이용해서 적용하면 된다. ( {name} )

1
2
3
4
5
6
7
8
9
10
11
12
sample(){
       alert("Hi JeongPro");
    }
render(){
        let name = "Username"
        return  (
            <div>
                <h1> Welcome to {name}</h1>
                <button onClick={this.sample}>Click</button>
            </div>
        );
    }
Colored by Color Scripter

메서드 sample()을 사용할 때는 render()메서드 밖에서 정의하고 안에서 똑같이 { }를 이용해서 적용한다.

{this.sample}

주의사항

- class 속성은 자바스크립트의 예약어라서 JSX에서는 className을 쓴다.

- img 처럼 태그 사이에 내용이 없는 경우 반드시 '/>' 로 닫는다.

- if문 사용이 불가하다. 대신 삼항연산자를 이용한다.

- Inline Style에서는 camelCase(낙타표기)인 Object를 쓴다.

1
2
3
4
5
6
7
8
9
10
11
12
13
render(){
        let pStyle = {
            color: 'white',
            backgroundColor: 'black'
        };
 
        return  (
            <div>
                <p style = {pStyle}>{1 == 1 ? 'True' : 'False'}</p>
                {/*스타일 적용하기*/}
            </div>
        );
    }
Colored by Color Scripter

[Inline Style, 주석달기]

1
2
3
4
5
return (
  <div>
    <img src="리소스주소" className={조건문 ? 'largeImage' : 'smallImage'} />
  </div>
);
Colored by Color Scripter
cs

[삼항연산자, img태그 닫기, className쓰기]

실제 사용하기

위와 같은 형식으로 많은 컴포넌트들을 만들었다면 이제 사용하면 된다.

1
2
3
import App from './App';
import { render } from 'react-dom';
render(<Basic />, document.getElementById('root'));

[render.js]

1
2
3
4
5
6
<html>
<body>
  <div id="root"></div>
  <script src="./render.js"></script>
</body>
</html>

[sample.html]

* 참고한 사이트

https://www.zerocho.com/category/React/post/57778bb1e07e4f1500b001fc

https://velopert.com/867

저작자표시비영리변경금지

'Javascript > React' 카테고리의 다른 글

React 바인딩(이벤트/메서드 연결) (0)	2017.10.17
Props, State (리액트 컴포넌트 속성, 상태) (0)	2017.10.13
JSX (React Component) (2)	2017.10.11
리액트(React) 환경 설정 (create-react-app) (2)	2017.10.09
리액트(React) (0)	2017.10.08

ZeroCho 2017.10.15 23:46

안녕하세요. 제 블로그를 참고해주셔서 감사합니다. 하나 수정드릴 것이 있다면 React 16버전 이상에서는 div로 감싸지 않아도 되는데 대신 배열 안에 넣어주셔야 합니다. key도 붙이고요.

댓글주소 수정/삭제 댓글쓰기
- JEONG_AMATEUR 2017.10.17 20:30 신고
  
  감사합니다. 덕분에 다시보고 수정했습니다.
  Node도 그렇고 React도 그렇고 자바스크립트 관련해서 자주 참고하고 있습니다.
  계속 참고(?)하고 출처밝히도록 하겠습니다.
  양해 부탁드립니다.
  
  댓글주소 수정/삭제