03. react jsx

render() 에서 구현하는 것은 jsx로 구현해야함(html 아님 -> javascript )

• 반드시 태그는 닫아 주어야함
• 두개 이상의 엘리먼트는 반드시 하나의 엘리먼트로 감싸줘야함(Fragment 사용으로 불필요한 tag rendering 제거 가능)
• 변수의 처리는 중괄호를 사용해서 사용 가능
• 변수 지정에는 var(ES6에서 사용안함), const(상수), let 있음
• if 문을 사용하는 방법은 3항 연산이나 && 구문을 사용 가능(하나의 tag에 여러개 지정 안됨)
• 여러 조건을 지정하기 위해서는 function을 지정해서 가능 ==> 호출('괄호로 닫고')하고 사용해야(괄호로 지정)
• 화살표 함수도 있음

https://react-anyone.vlpt.us/03.html

3편: JSX · GitBook

import './App.css';
import React, {Component, Fragment} from "react";

class MyApp extends Component {
   render() {
      const name = 'soul';
      let value = 1;
      // jsx에서는 이름을 카멜케이스로 입력해야함. value는 문자로
      const styleType = {
         backgroundColor: 'blue',
         padding: '10px',
         color: 'yellow',
         fontSize: '44px'
      };
      return (
        <Fragment >
           외부 css 파일로 style 지정
           <div className='App'>
              hello {name} !
           </div>
           3항 연산을 통한 조건문 구현
           <div>
              {
                 1 + 3 === 2
                   ? '맞다'
                   : '틀리다'
              }
           </div>
           하나의 결과만 출력함
           <div>
              {
                name === 'soul' && <div>나는 누구인가?</div>
              }
           </div>
           여러 조건을 사용할 경우
           <div>
              {
                 (function () {
                    if (name === 'soul') return <div>안녕 {name} ~~~</div>
                    if (name === '나는') return <div>333</div>
                    if (name === '뭐지') return <div>444</div>
                    return <div>해당 없음</div>
                 })()
              }
           </div>
           내부에서 style 지정, 괄호 함수 사용
           <div style={styleType}>
              {
                 (() => {
                    if (value === 1) return <div>1111</div>
                    if (value === 2) return <div>2222</div>
                    if (value === 3) return <div>3333</div>
                    return <div>해당 없음</div>
                 })()
              }
           </div>
        </Fragment>
      );
   }
}

export default MyApp;