5-1. JSX 기본 정리

1.<div></div> 열었으면 꼭닫아야된다.

// src/App.js
import React, { Component } from 'react';
 
class App extends Component {
  render() {
    return (
      <div>
        
      </div>
    );
  }
}
 
export default App;

2. 두개의 엘리먼트는 하나의 엘리먼트로 감싸져야한다.

// src/App.js
import React, { Component } from 'react';
 
class App extends Component {
  render() {
    return (
      <div>
        Hello
      </div>
      <div>
        Bye
      </div>
    );
  }
}
 
export default App;

3. 그냥 <div>로 감싸주면 된다.

import React, { Component } from 'react';
 
class App extends Component {
  render() {
    return (
      <div>
        <div>
          Hello
        </div>
        <div>
          Bye
        </div>
      </div>
    );
  }
}
 
export default App;

4. 스타일설정이나 필요한 상황이라면 Fragement

import React, { Component, Fragment } from 'react';
 
class App extends Component {
  render() {
    return (
      <Fragment>
        <div>
          Hello
        </div>
        <div>
          Bye
        </div>
      </Fragment>
    );
  }
}
 
export default App;

5. JSX안에 자바크립트의 값

import React, { Component } from 'react';
 
class App extends Component {
  render() {
    const name = 'react';
    return (
      <div>
        hello {name}!
      </div>
    );
  }
}
 
export default App;

한번 선언하고 바뀌지 않는 값을 설정 할 때 const사용, 바뀌게 될 수 있는 값은 let

6. 조건절은 삼항연산

import React, { Component } from 'react';
 
class App extends Component {
  render() {
    return (
      <div>
        {
          1 + 1 === 2 
            ? (<div>맞아요!</div>)
            : (<div>틀려요!</div>)
        }
      </div>
    );
  }
}
 
export default App;

만약 복잡한 조건을 사용시에는 JSX 밖에서 로직을 작성.

7. 화살표 함수(람다?)

(function() {
            if (value === 1) return (<div>하나</div>);
          })()
 
(() => {
  if (value === 1) return (<div>하나</div>);
})()

밑에 것은 바꿔서쓴것

8. 스타일 작성법

import React, { Component } from 'react';
 
class App extends Component {
  render() {
    const style = {
      backgroundColor: 'black',
      padding: '16px',
      color: 'white',
      fontSize: '12px'
    };
 
    return (
      <div style={style}>
        hi there
      </div>
    );
  }
}
 
export default App;

9. App.css 활용

App.css

.App {
  background: black;
  color: aqua;
  font-size: 36px;
  padding: 1rem;
  font-weight: 600;
}

App.js

import React, { Component } from 'react';
import './App.css'
 
class App extends Component {
  render() {
    return (
      <div className="App">
        리액트
      </div>
    );
  }
}
 
export default App;

위에 import 꼭해주고, className를 맞춘다.

------------------------------------------------------------------------------

렌더링?

화살표 함수는 람다인지?

-보충