react.js 시작하기 190801 - fragment, JSX, 삼항연산

주석쓰 걍 단축키쓰셈

class App extends Component {
  render() {
    return ( 
      <div>
        <h1>냥냥2</h1>
        <div> 
          {/* <h1>ghihihihi</h1> */}
        </div >
      </div>
    );
  }
}
export default App;

 

Fragment

import React, { Component, Fragment } from 'react';

<div/> : 아웃 라인 잡기

<Fragment></Fragment> div를 여러겹 쓰다보면 코드가 안으로 파고파고 들어가는 경우가 생긴다.

Fragment태그는 html-elements에서 보이지 않는다.

보통 다른 Component를 소환할때 사용된다.

class App extends Component {
  render() {
    //javascript code area start @
    console.log(`asdfasdfasdfasdf`);//브라우저 위의 console에서 출력된다
    
    //javascript code area end @
    return ( 
    /* html _javascript code jsx language in html-body 
      반드시 div태그 한개가 포함되어있어야 한다.
      <div></div>
      <div/>
      */
     <Fragment>
      <div>
        <h1>냥냥2</h1>
        <div> 
          <h2> hellooooooooooooooo! </h2>
        </div >
      </div>
      </Fragment>
    );
  }
}

return되는 JSX문법은 항상 하나의 태그로 전부가 묶여 있어야 한다.

//이건 안돼
<div>고양이</div>
<div>냥냥</div>

//이렇게 하나의 태그로 감싸줘야 한다
<div>
	<div>멍멍이</div>
	<div>깡깡</div>
</div>

https://ko.reactjs.org/docs/fragments.html

Fragments – React

JSX에서 Javascript 사용하기

import React, { Component } from 'react';
import './App.css'
class App extends Component {
  render() {
    const b = true
    const s = `야옹야옹`
    const asdf = typeof s===typeof b ? `어흥이`:`끼루룽`
    return (
      <div className='st'>
        <h1>냥냥2</h1>
        <div> 
          <h2>{s}</h2>
          <h2>{ b ? `댕댕이`:`망망`}</h2>
          <h2>{ asdf }</h2>
        </div>
      </div>
    );
  }
}

export default App;

스코프를 열기만하면 자바스크립트라고 생각하면된다

JSX에서 삼항연산자까지는 된다.

 

 

이것과 관련하여 css 스타일을 언급할수있다.

 

리액트에서는 div에서 태그 스타일을 직접적으로 지정하는 것을 금지하고 있다.

대신 javascript에서 값을 잡아주고 그것을 style={ }에 넣어주면 된다.

하지만 이 방법은 권장하지 않고 내가 굳이 css를 만질 일이 없다. 전 - 혀

일단 방법은 다음과 같다.

import React, { Component } from 'react';
class App extends Component {
  render() {
    const st = {
      backgroundColor: 'green',
      border: '1px solid black',
      height: Math.round(Math.random() * 300) + 50,
      width: Math.round(Math.random() * 300) + 50,
      WebkitTransition: 'all',
      MozTransition: 'all',
      msTransition: 'all'
    }
    return ( 
      <div>
        <h1>냥냥2</h1>
        <div> 
          <div style={st}>
          <h1>hellooooo!!!!!!!!</h1><br/>
          <h1>hellooooo!!!!!!!!</h1>
          </div>
        </div >
      </div>
    );
  }
}

export default App;

머 일케하면 대강 뜬다.

근디 보편적으로는 이렇게 안쓰고 외부의 css파일에서 갖고 온다.

import React, { Component } from 'react';
import './App.css'
class App extends Component {
  render() {
    return ( 
      <div>
        <h1>냥냥2</h1>
        <div> 
          <div className='st'>
          <h1>helloooooooooooo!!!!!!!!</h1><br/>
          <h1>helloooooooooooo!!!!!!!!</h1>
          </div>
        </div >
      </div>
    );
  }
}

export default App;

일케쓰고 css를 import시켜주야한다.

추가로 <br/>이거는 원래 그냥 html문서에서는 <br>만써줘도 충분히 먹히는 데

JSX에서는 무조건 / 슬래시를 해줘야 br태그라고 정확하게 인식한다.