JSX란??

:리액트 컴포넌트를 작성할 때 쓰는 문법
->HTML 이랑 비슷하지만 지켜야하는 규칙이 있다.

<규칙>

규칙 1. 태그는 꼭! 닫혀야한다.

잘못된 예시)

import React, { Component} from 'react';

class App extends Component{
  render(){
    return(
      <div>
        <input type = "text">
      </div>
    );
  }
}

이렇게 쓰면 오류가 난다.

 <input type = "text"> 을 
 <input type = "text"/>  or <input type = "text"></input>

이렇게 고쳐주어야한다.

*셀프클로징 태그로 닫아주는것이 더 좋다.
<input type = "text"/>

규칙 2. 하나의 엘리먼트로 꼭! 감싸자.

잘못된 예시)

아래와 같이 코드를 작성하면 에러가 난다.

import React, { Component} from 'react';

class App extends Component{
  render(){
    return(
      <div>Hello</div>
      <div>Hi</div>
    );
  }
}

export default App;

그렇다면..?.? 감싸주면 된다~!
=> 두개 이상의 elements는 꼭 하나로 감싸줘야한다.

import React, { Component} from 'react';

class App extends Component{
  render(){
    return(
      <div>
      <div>Hello</div>
      <div>Hi</div>
      </div>
    );
  }
}

export default App;

div를 이용하여 elements들을 감싸게되면 불필요한 div가 생겨,

스타일 관련 설정을 하면서 코드가 꼬이게 될 수도 있고/ table 관련 태그를 작성 할 때 번거로워질 수도 있다.

=> < Fragment>를 활용하여 해결하자.

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

class App extends Component{
  render(){
    return(
      <Fragment>
      <div>Hello</div>
      <div>Hi</div>
      </Fragment>
    );
  }
}

export default App;

Fragment를 사용하면, 불필요한 div가 사라진다.

<JSX안에서 자바스크립트 값 사용하기>

- { } 중괄호를 사용한다.

import React, { Component} from 'react';

class App extends Component{
  render(){
    const name = 'react!';
    return(
      <div>
        hello {name}
      </div>
    );
  }
}

export default App;

->이렇게 코드를 작성하게되면,

hello react

-> 라는 문구가 뜬다.

<조건부 렌더링>

JSX 내부에서 조건부 렌더링을 할 때 => 보통 삼항 연산자 / AND 연산자를 사용한다.

반면에 if 문을 사용 할 수가 없다.

if문을 사용하려면 IIFE(즉시 실행 함수 표현) 을 사용해야한다. (-> 다음에 포스팅 예정!)

1. 삼항연산자
:삼항연산자는 true 일 때와 false 일 때, 다른 어떤 것을 보여주고자 할 때 사용.

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        {
          1 + 1 === 2 
            ? (<div>맞아요!</div>)
            : (<div>틀려요!</div>)
        }
      </div>
    );
  }
}

export default App;

2. AND연산자
: 단순히 조건이 true 일 때만 보여주고, false 경우 아무것도 보여주고 싶지 않을 때 사용한다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        {
          1 + 1 === 2 && (<div>맞아요!</div>)
        }
      </div>
    );
  }
}

export default App;

가끔 복잡한 조건을 작성해야 할 때도 있다. 그러한 조건들은 웬만하면 JSX 밖에서 로직을 작성하는것이 좋다. 하지만, 꼭 JSX 내부에서 작성해야 한다면, 아래와 같이 IIFE 를 사용합니다.

[ if문 대신 switch문을 작성해도 된다~! ]

import React, { Component } from 'react';

class App extends Component {
  render() {
    const value = 1;
    return (
      <div>
        {
          (function() {
            if (value === 1) return (<div>하나</div>);
            if (value === 2) return (<div>둘</div>);
            if (value === 3) return (<div>셋</div>);
          })()
        }
      </div>
    );
  }
}

export default App;

위의 조건문은 다음과 같이 화살표 함수(?)로 고쳐서 쓸 수도 있다.

(() => {
  if (value === 1) return (<div>하나</div>);
  if (value === 2) return (<div>둘</div>);
  if (value === 3) return (<div>셋</div>);
})()

화살표 함수는 this, arguments, super 개념이 없는 익명 함수이다. -> 요것도 다음에 정리......;;;