[React.js] React.js2편 JSX1

React.js JSX

---

JSX는 html코드랑 비슷해 보이지만 사실은 자바스크립트 코드로 바꾸어 주어서 실행합니다. 일반 html이랑 사용법은 비슷하지만 몇가지 규칙이 있습니다. 지금 부터 그 규칙을 알아봅시다.  여기서 실행은 https://bit.ly/beginreact 이사이트를 이용하면 된다. 단순히 문법만을 설명하고 있습니다.  그리고 ES6의 문법으로 작성됩니다. 

1. 무조건 닫힘 기호가 있어야 합니다.

ex) 원래는<input type="text> 이런식으로 사용하지만 <input type="text"/>이거나 <input type="text"> </input>이런식으로 사용해야 합니다. 

2. 두번째 연속된 태그가 두개 이상일 때 이를 감싸는 태그가 필요합니다. 

안그러면 오류 발생 

return (
<div>
</div>
<div> 
</div>
);

이런식으로 사용하면 오류가 발생합니다. 그 위에 <div>로 다시 감싸주어도 되지만 이는 html소스에 쓸때 없이 <div>를 감싸줍니다. 따라서 Fragment를 활용합니다. 

import React, {Component, Fragment} from 'react'
~~~~~~~~~~~
 return (
     <Fragment>
<div></div>
 <div> </div>
 </Fragment>
 );
~~~~~~~~~~~~

이런식으로 사용해주면 쓸 때 없는 div코드 없이 안전하게 넣어 줄 수 있다. 

3. 일반 변수를 html코드에 호출하기 

class App extends Component
{
    
    render(){
        const a = 1;
        const b= 2;
        const c= 3;
        return (
            <Fragment>
                <div>
                <h1>안녕하세요 리액트!!</h1>
                <p>{a}번 {b}번 {c}번</p>
                </div>
            </Fragment>
        );
    }
}

{}안에 변수 한개씩 호출 가능하다. 

4. if문 사용하기 

방법 1. 삼항연사자 이용하기

<div>
    {
    a === 3 ? '맞아' : '틀렸어'
    }
</div>

방법 2. &&을 이용하기 

            <div>
                {
                    a === 3 && <div>a는 {a}이 맞아!</div>
                }
            </div>

방법 3. if문 이용하기 

(()=> {
    if (a === 1)
        return <div>a가 {a}야!!!</div>
    else
        return <div>뭐 다틀리노 !!</div>

})()

그리고 위코드에서 return문 안에서 함수를 선언만 해주는 것이 아니라 바로 호출해주어야한다.