< React(리액트) 구조와
기초문법 >
1. 리액트 js 파일
기본 구조
1) 리액트 초기 구동 화면 구조 :
src/App.js
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
2) 리액트 js 파일
기본 구조 : class/extends à
render(){} à return() à JSX
// src/App.js
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
</div>
);
}
}
export default App;
3) JSX 내부의 복수의 div를
감싸는 tag로는 Fragment 를 사용. (div도 사용은 가능함.)
- html에서는
input, br 등의 태그는 닫지 않고 사용했지만, JSX에서는
반드시 닫아줘야 함.
import React, { Component, Fragment } from 'react';
class App extends Component {
render() {
return (
<Fragment>
<div>
Hello
</div>
<div>
Bye
</div>
</Fragment>
);
}
}
2. 변수 사용 : const 와
let
1) JSX 내부에서 JavaScript
변수를 사용 : render 내부에 return 사용전에
const 변수명 = '~~~'; 으로 변수 선언하고, rerutn 내부의 JSX에서 변수명을 { } 로 감싸기.
- const
: 선언 후 변하지 않는 값
- let
: 선언 후 변할 수 있는 값 (JavaScript의 var
와 유사함.)
import React, { Component } from 'react';
class App extends Component {
render() {
const name = 'react';
return (
<div>
hello {name}!
</div>
);
}
}
2) let 사용방법(const와
같은 방법) : let 변수명 = '~~~';
function foo() {
let a = 'hello';
if (true) {
let a = 'bye';
console.log(a); // bye
}
console.log(a); // hello
}
3. JSX 에서의 조건문
1) 삼항 연산자 사용
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
{
1 + 1 === 2
? (<div>맞아요!</div>)
: (<div>틀려요!</div>)
}
</div>
);
}
}
2) & 연산자 사용 (true의
실행값만 설정시)
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
{
1 + 1 === 2 && (<div>맞아요!</div>)
}
</div>
);
}
}
3) 복수 조건 사용 : if (~~~)
return (~~~);
조건문은 { } 로 감싸고,
function( )는 ( )로 감싸고 뒤에 ( )를
붙임, function의 함수 내용은 { }로 감싼다.
import React, { Component } from 'react';
class App extends Component {
render() {
const value = 1;
return (
<div>
{
(function() {
if (value === 1) return (<div>하나</div>);
if (value === 2) return (<div>둘</div>);
if (value === 3) return (<div>셋</div>);
})()
}
</div>
);
}
}
4) 복수 조건 사용 : if 문
대신 switch문을 사용
- 화살표
함수 ( ) => {~~~}( )
- 화살표
함수는 최신 JavaScript인 ES6에서 지원하며, this, arguments, super 개념이 없는 익명 함수임.
(() => {
if (value === 1) return (<div>하나</div>);
if (value === 2) return (<div>둘</div>);
if (value === 3) return (<div>셋</div>);
})()
4. JSX에서 CSS 사용
- const
css_set_name = { ~~~ } 로 css 객체를 정의하고 return 문의 tag안에 style={css_set_name}
으로 CSS 적용
- tag
클래스 설정시 html 에서는 class, JSX 에서는
className
import React, { Component } from 'react';
class App extends Component {
render() {
const style = {
backgroundColor: 'black',
padding: '16px',
color: 'white',
fontSize: '36px'
};
return <div style={style}>안녕하세요!</div>;
}
}
5. JSX 에서 주석 달기
- div
문에서 tag 밖에서는 {/* 주석내용 */}, 시작 tag 내부에서는 //주석내용
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
{/* 주석은 이렇게 */}
<h1
// 태그 사이에
>리액트</h1>
</div>
);
}
}
export default App;