[React]jsx 기본 문법알아보기

태그는 꼭 닫는다

태그는 꼭 닫혀있어야한다.
간혹 HTML에서 태그를 안닫아도 되는 태그들이 있어서 햇갈릴 수 있다.
input같은 태그를 쓸 때에도 <input></input> 혹은 <input 내용 />이렇게 태그를 꼭 닫아주기

Fragment

두개 이상의 element는 꼭 하나의 element로 감싸줘야한다.
모든 태그를 두개 이상 나열하면 하나로 감싸줘야한다.
근데 두개의 div를 렌더링 하기 위해 추가적으로 div를 하나 더 써줘야하는 것이 비효율적일 수 있다.
이럴 때 fragment를 사용할 수 있다.
react 라이브러리를 import할 때 Component옆에 Fragment를 추가해주고
겉을 감싸줄 때 <fragment>태그를 써주면 렌더링 이후 불필요한 외부 태그가 없는 것을 확인할 수 있다.

jsx안에서 js사용하기

중괄소 {}안에 자바스크립트 변수를 사용해줄 수 있다.

자료형 scope

var : 함수단위 (더이상 사용 안하는..)
let : 블록단위 (유동적인 값)
(const : 한번 선언 후 고정되는 값)

var

function foo() {
  var a = 'hello';
  if (true){
    var a = 'bye';
    console.log(a); //bye
  }
  console.log(a); //bye
}

let

function foo() {
  let a = 'hello';
  if (true){
    let a = 'bye';
    console.log(a); //bye
  }
  console.log(a); //hello
}

조건부 렌더링

중괄호 안에서 자바스크립트 코드를 쓸 때 if문을 바로 사용할 수 없기 때문에 삼항연산자를 쓴다.

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

class App extends Component {
  render() {
    const name = 'jiwon';
    return (
      <div>
        {
          1 + 1 == 2 ? '맞다' : '틀리다'
        }
      </div>
    );
  }
}

export default App;

특정 값이 true일때만 보여지게하고싶을 때

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

class App extends Component {
  render() {
    const name = 'jiwon';
    return (
      <div>
        {
          name === 'jiwon' && <div>지원이</div>
        }
      </div>
    );
  }
}

export default App;

이렇게 하면 조건이 true일 때 &&연산자 뒤에있는 문장이 실행된다.

조건 여러개를 쓰고 싶을 때

조건이 여러개일 때는 일반적으로 jsx바깥에서 쓴다.
하지만 jsx안에서 사용하고싶다면 (iife라는?) 함수를 선언하고 바로 사용하는 방법을 선택하면 된다.

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

class App extends Component {
  render() {
    const value = '1';
    return (
      <div>
        {
          (function() {
            if (value === 1) return <div>1이다</div>
            if (value === 2) return <div>2이다</div>
            if (value === 3) return <div>3이다</div>
            return <div>없다</div>
          })() //함수를 감싸주고 곧바로 호출
        }
      </div>
    );
  }
}

export default App;

화살표함수 버전

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

class App extends Component {
  render() {
    const value = '1';
    return (
      <div>
        {
          (() => {
            if (value === 1) return <div>1이다</div>
            if (value === 2) return <div>2이다</div>
            if (value === 3) return <div>3이다</div>
            return <div>없다</div>
          })() //함수를 감싸주고 곧바로 호출
        }
      </div>
    );
  }
}

export default App;

화살표함수는 this, argument, super의 개념이 없는 함수이다.

style

• style이라는 객체를 만든다.
• 중간에 -가 들어가는 스타일은 카멜케이스로
• 색상이나 숫자는 문자열로 16px, white 이렇게

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

class App extends Component {
  render() {
    const style = {
      backgroundColo: 'black',
      padding: '16px',
      color: 'white',
      fontSize: '36px'
    };
    return (
      <div style={style}>
        안녕하세욜~
      </div>
    );
  }
}

export default App;

jsx에서 class사용하기

기존 html에서 class를 사용할 때 태그 안에 class="클래스명" 이렇게 사용했지만 jsx에서는 className을 사용한다.
className="클래스명"

jsx에서 주석 사용하기

자바스크립트 안에서 주석을 //, /**/ 로 사용했지만 jsx안에서는

멀티라인 주석모양으로 브라캣으로 한번 감싸줘야한다.{/**/}

가끔씩 컴포넌트를 여러 줄로 입력할 때 태그 안에다가 주석을 넣을 수 있다.
<h1 //주석임> 이렇게~