JSX란 무엇인가

JSX는 JavaScript XML의 줄임말이다 React에서 UI를 구성할때 사용하는 문법으로 JavaScript를 확장한 문법이다 이 문법으로 React 엘리먼트를 만들 수 있다 하지만 공식적인 JavaScript 문법이 아니여서 'Babel' 같은 컴파일러로 JavaScript 코드로 변환 해야한다 예시를 보자.

//JSX 문법
function App() {
  return (
    <h1>'Hello World'</h1>
  )
}

//컴파일 후 
function App() {
  return react.createElement(h1, null, 'Hello World')
}

이렇게 JSX를 사용하면 마크업 형태의 코드를 작성하여 DOM에 배치 할 수 있다. 예시를 보면 알 수 있듯이 DOM 코드보다 명시적으로 코드를 작성 할 수 있고 기능과 구조를 한번에 확인할 수 있다.

JSX 문법(규칙)

1.하나의 엘리먼트(부모) 안에 모든 엘리먼트가 포함

// 잘못된 예
function App() {
  return (
    <div>Hi</div>
    <div>Hello</div>
  )
}

// 정상적인 예
function App() {
  return (
    <div>
      <div>Hi</div>
      <div>Hello</div>
    <div/>
  )
}

Virtual DOM 컴포넌트 변화를 감지할때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리로 구성되어야 하는 규칙이 있기 때문 Virtual Dom 관련 링크(https://velog.io/@ykh0316/React-Virtual-DOM)

2. 자바스크립트 표현식

JSX 안에서 자바스크립트 문법을 사용할 수 있다(중괄호 사용)

function App() {
  const name = {
    firstName: 'KiHyuk',
    lastName: 'Yoon'
  }
  return (
    <div>
      <div>{name.lastName}</div>
      <div>{name.firstName}</div>
    </div>
  )
}

3. Class 정의시 ClassName 사용

function App() {
  return (
 	<div className='ex1'>꾸밀내용</div>
  )
}

4. 조건부 렌더링 시 삼항연산자 사용

JSX 내부에서는 if문을 사용할 수 없어서(외부에서는 가능) 삼항연산자를 사용

//삼항연산자
...
import MyPage from './component'
import LoginPage from './component'

function App() {
  const [isLogin, setIsLogin] = setState(false);
  
  return (
    {
      isLogin ? <MyPage /> : <LoginPage />
    }
  )
}

//if문 사용
function Component(isLogin) {
  return (
    if(isLogin){
      return <div>true일때 보여줄 페이지</div>
    }
  	return <div>false일때 보여줄 페이지</div>
  )
}

//&& 연산자 사용
function App() {
  const [isLogin, setIsLogin] = setState(false);
  
  return (
    {
      isLogin && <div>true일때 보여줄 페이지</div>
    }  
  )
}

5. Tag들은 항상 닫혀있어야 한다

function App() {
  return (
    <input type='text'></input>  
  )
}

//어떤 tag든 self클로징 가능
function App() {
  return (
    <input type='text' />  
  )
}

이렇게 JSX는 자바스크립트에서 HTML을 작성하듯이 view를 구성할 수 있는 큰 장점이있다.