TILReactSyntax

React Syntax

,

React Syntax

create-React-app

설치법

1
2
3
4
5
6
7
8
9
$ npm install create-react-app -g

// 대문자를 사용하면 안된다!!
$ create-react-app [ProjectName]

// 시작할때 2개중 하나를 사용하면된다.
$ yarn start 
$ npm start

1
2
3
4
5
6
7
8
9
10
11
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

// id가 root인 곳에 App.js이라는 component를 연결한다.
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

ReactDOM을 통하여 root라는 id를 가져오고 App으로 import한 App.js의 component를 연결한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  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>
    );
  }
}

export default App;


Component 만들기

component : 페이지에서 나누어지는 덩어리로 표현가능하다.

state와 props가 component의 데이터를 관장한다. render를 다시 해준다.
props : 외부에서 값을 component로 넣는다. (read only)
state : component의 상태를 나타낸다. (read only)

  • stateless component: component 내에서 상태관리를 할 필요가 없을 떄(function)
  • class 로 만들어지는 component
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

const myage = 25
const gender = "남자"

// id가 root인 곳에 App.js이라는 component를 연결한다.
ReactDOM.render(<App age={myage} gender={gender}> 나는 props의 자식!! </App>, document.getElementById('root'));
// 아래처럼 사용가능하다.
// ReactDOM.render(<App age={myage} gender={gender}> <Her> </Her> </App>, document.getElementById('root'));
registerServiceWorker();


return 안에는 div 1개만 가능하다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Her from './Her';


class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      name:'KimSejune'
    }
  }
  render() { 
    return (
      <div>
        {this.state.name}
        {this.props.age}
        {this.props.gender}
        {this.props.children}
        <Her></Her>
      </div>
    );
  }
}

export default App;

1
2
3
4
5
6
7
8
9
10
11
//Her.js

import React, { Component } from 'react';

export default function Her() {
  return(
    <h2>stateless</h2>
  )
}


Share