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 |
JSX (React Component) (2) | 2017.10.11 |
리액트(React) 환경 설정 (create-react-app) (2) | 2017.10.09 |
리액트(React) (0) | 2017.10.08 |
안녕하세요. 제 블로그를 참고해주셔서 감사합니다. 하나 수정드릴 것이 있다면 React 16버전 이상에서는 div로 감싸지 않아도 되는데 대신 배열 안에 넣어주셔야 합니다. key도 붙이고요.
감사합니다. 덕분에 다시보고 수정했습니다.
Node도 그렇고 React도 그렇고 자바스크립트 관련해서 자주 참고하고 있습니다.
계속 참고(?)하고 출처밝히도록 하겠습니다.
양해 부탁드립니다.