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> ); } } |
무슨말이냐면 이런식으로 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> ]; } } |
JSX에서 javascript 표현하기
1 2 3 4 5 6 7 8 | render(){ let name = "Username" return ( <div> <h1> Welcome to {name}</h1> </div> ); } |
변수가 있으면 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> ); } |
메서드 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> ); } |
[Inline Style, 주석달기]
1 2 3 4 5 | return ( <div> <img src="리소스주소" className={조건문 ? 'largeImage' : 'smallImage'} /> </div> ); | 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 |
| 리액트(React) 환경 설정 (create-react-app) (2) | 2017.10.09 |
| 리액트(React) (0) | 2017.10.08 |
