react 를 사용하기 전에 미리 알아둘 문법이 있습니다.
자바스크립트에 적용되는 문법입니다.
형식)
변수선언 : let 변수명 = 값
출력 : {{변수명}}
형식) {this.호출할함수명()}
// ex) 기존 HTML 에서 사용하던 방식 <button onclick={this.sayHello()}>Click me</button>
3-1) 함수호출 시 () 를 붙이지 않는다.
: 이벤트를 발생시키지 않았는데도 호출되기 때문에
3-2) 함수명앞에 this를 붙여야 된다.
: {this.속성명}
3-3) onclick을 사용하지 않고, onClick 을 사용합니다.
: on이벤트종류(첫글자는 반드시 대문자를 사용할것)
웹 문서니까 당연히 css 로 디자인을 합니다.
적용방법도 사실 크게 다르지 않아요,
4-1) 스타일시트가 복잡해지면 별도의 css파일을 만들어서 import로 불러옵니다.
4-2) 스타일시트가 적용이 된 camelCase Object를 만들어서 적용할 수도 있습니다.
형식)
let 객체명={속성명:속성값~}
return 밖에서 주석을 표시
ex)
return()<div> {/* return 안쪽에 주석을 사용하기위해서 { }로 묶어주면 된다. */}
주석은 아무곳에나 달게되면 (특히 render() 내부) 렌더링이 되지 않습니다.
return 밖에서 주석을 표시
리엑트에서는 if문을 사용할 수 없습니다.
render() 함수 내부에 삼항연산자를 이용해서 작성해주세요.
(추가적으로 들어가는 문법/이론이 있습니다.)
: myApp > src > component > App.js
//import React from 'react';//React.Component클래스
import React,{Component} from 'react'; // 다른 방식으로 불러옵니다.
import '../App.css'; //import '경로포함 불러올 css파일명'
//클래스를 통해서 컴포넌트를 불러오는 방법입니다.
//class App extends React.Component{
class App extends Component{ // 컴포넌트로 활용하기 위해 Component 클래스를 상속받습니다.
//이벤트처리 함수를 선언합니다.
sayHello(){
alert("이벤트함수 호출됨")
}
//화면에 디자인한 내용을 출력해주는 render()
render(){
let text="React변수 사용" /* {출력변수명} {{변수명}}(vue.js) */
let pStyle={ // 스타일을 적용하기 위한 Object
color:'aqua',
backgroundColor:'black'
}
형식)
태그생성(DOM)(1.생성할 태그명,2.props전달값,3.태그의 내용)
// 태그를 생성해봅니다.
const root=React.createElement('div',{},
React.createElement('h1',{},"Hello, world!",
React.createElement('a',{href: 'mailto:mark@ifelse.io'},
React.createElement('h1',{},"React In Action"),
React.createElement('em',{},"..and now it really is!")
)
)
)
const root2=(<div>
<h1> Hello,World
<a href="mailto:mark@ifelse.io">
<h1>React In Action</h1>
<em>..and now it really is!</em>
</a>
</h1>
</div>
)
/*
return 밖에서 주석을 표시
*/
return( // 실제로 export 되어서 표시되는 부분 (렌더링)
<div> {/*
return 안쪽에 주석을 사용하기위해서 { }로 묶어주면 됩니다.
*/}
<h1 class="App">리액트구조 및 환경설정부분,{text}</h1>
<h1 className="test">반드시 하나의 태그를 사용할것</h1>
<button onClick={this.sayHello}>클릭</button>
<p style={pStyle}>{1==1?'True':'False'}</p>
<hr />
{root} // 변수를 출력
<hr />
{root2} // 변수를 출력
</div>)//html문서포함해서 문자열포함
}
}
//export default 외부에 내보낼 클래스명;
export default App;