React - JSX

in REACT on React, 공부


JSX는 문법이다. html같이 생겼지만 javascript로 변환된다. HTML이랑 비슷하지만 지켜야 할 규칙이 몇가지 있다.

1. 꼭 닫혀야 하는 태그

<> 이런 식으로 태그를 열면 무조건 태그를 닫아야 한다.

<input type="text" /> 이런식으로 self closing tag를 달아주는 편이 좋다.

2. 두 개 이상의 element는 무조건 하나의 element로 감싸져야 한다.

<div></div>
<div></div>

이건 안된다. 근데 굳이 두개를 묶으려고 또 하나를 상위에 두는 것이 번거롭다. 이떄는 Fragment를 사용하면 된다.

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

<Fragment>
<div></div>
<div></div>
</Fragment>

3. JSX안에 자바스크립트 값 사용하기

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

class App extends Component{
  render(){
    const name = 'react';
    return{
      <div>
        hello {name} //이렇게 중괄호를 쓴다.
      </div>
    }
  }
}

조건부 렌더링

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

class App extends Component{
  render(){
    const name = 'react';
    const value = 1;
    return{
      <div>
        {
          1+1 === 2
            ? '맞다'
            : '틀리다!'
            
          name === 'react' && <div>리액트다</div> //and 연산자를 통해 조건부 렌더링을 할 수 있다.
          
          {function(){
            if(value ===1) return <div>1임</div>
            if(value ===2) return <div>2임</div>
            if(value ===3) return <div>3임</div>
          }}()
          
          {()=>{
            if(value ===1) return <div>1임</div>
            if(value ===2) return <div>2임</div>
            if(value ===3) return <div>3임</div>
          }}()
        }
      </div>
    }
  }
}

style

원래는 html에 style을 넣어줄 때는 문자열로 넣어줬다.

style을 사용하게 될 때는 객체 형태로 넣어주게 된다.

import React, { Component } from 'react';

class App extends Component{
  render(){
  
    const style = {
      backgroundColor: 'black', //기존에는 background-color였지만 이젠 새 단어마다 대문자.
      padding: '16px', //문자열 형식으로
      color: 'white',
      fontSize: 5+10+'px'
    };
    
    return{
      <div style={style}> //스타일 적용
      </div>
    }
  }
}

클래스

<div className="App"> //className이라 해야지 작동을 한다.

주석

JSX 내부에서는 //, /**/ 가 그대로 렌더링 되어 버린다.

{//JSX 내부에서는 이렇게 작성해야 한다.}
{/*dlfjgrpsk*/}
<h1 //아님 이렇게></h1>