[1] JSX 기본 문법

JSX

JSX는 HTML이랑 비슷하지만, 지켜야 할 규칙이 몇가지 있음

React 개발을 쉽게 하기 위해, HTML과 비슷한 문법으로 작성하면 React.createElement를 사용하는 자바스크립트의 형태로 변환해줌.

 

 

1. 태그는 꼭 닫혀있어야 함

<div></div>
<input /> #한 번 열은 태그를 그 자리에서 바로 닫는다.

---

2. 두 개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져 있어야 함.

<div>
      <div>
        안뇽1
      </div>
      <div>
        안뇽2
      </div>
</div>	

 

근데 구찮게 이렇게 div로 꼭 감싸주어야하나?! 뭔가 불필요해 보인다.

=> 이런 문제를 해결하려면 Fragment로 감싸주면 된당!

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

class App extends Component {
	render() {
    	return (
        <Fragment>
        	<div>안녕1</div>
            <div>안녕2</div>
        </Fragment>
        )
    }
}

export default App;

그러면 이렇게 불필요한 div가 사라진 것을 볼 수 있음.

---

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

JS안에 자바스크립트 값을 사용하려면 중괄호({})를 사용하면 됩니당.

아래와 같이 사용하면 됨!

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

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

export default App;

---

Var, Const, Let이 뭔지 잘 모르시는 분들을 위한 TIP

var: ES6부터는 더이상 사용하지 않아용

const: 한번 선언 후 고정적인 값

let: 한 번 선언하고 바뀔 수 있는 유동적인 값

 

var과 let의 다른 점

Example)

---

4. 조건부 렌터링

4-1) 삼항연산자

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

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

      </div>
    );
  }
}

export default App;

4-2) &&연산자

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

class App extends Component {
  render() {
    const name = "ming";
    return (
      <div>
        {
          name === 'mingg' && <div>'안녕'</div>
        }

      </div>
    );
  }
}

export default App;

 

4-3) IIFE(즉시 실행 함수 표현)라고 함수를 선언하고 바로 실행하는 방식으로도 구현이 가능 

간단한 조건들을 사용할 때만 JSX 내부에서 작성하고, 조금 더 복잡한 조건들을 작성할 때에는 JSX 밖에서 로직을 작성함.

https://developer.mozilla.org/ko/docs/Glossary/IIFE

IIFE

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

class App extends Component {
  render() {
    const value = 4;
    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;

() => (이하 화살표함수)는 function에서 this, argument, super의 개념이 없는 함수인데, 이제 많이 쓰일 것이니 잘 알아두도록 해야함!

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

class App extends Component {
  render() {
    const value = 4;
    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;

---

 

var, const, let과 화살표 함수에 대한 더 자세한 설명들

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98

화살표 함수

어렵군요..(봐도 잘 모르겠..)ㅎ