리액트 | jsx 문법

https://goddaehee.tistory.com/296

 

JSX란?

 - JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다.
 - JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.
 - 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

   ㄴ es6를 es5로 변환

 - JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하다.
 - 자바스크립트에서 HTML을 작성하듯이 하기 때문에 가독성이 높고 작성하기 쉽다.(주관적인 관점)

 

JSX 문법

1. 주석 alt + shift + a {/* */}

2. return 구문은 반드시 1개여야 합니다. 반드시 하나의 태그를 리턴해야합니다.

ex) Fragment 컴포넌트 하나로 묶인 것처럼 하나의 태그를 리턴해야한다.

<Fragment>
      <ul>
        <li>1. 주석 alt + shift + a{/* 주석 */} </li>
      </ul>  
      
      <div> 박스 1 </div>
      <div> 박스 2 </div>
      <div> 박스 3 </div>
</Fragment>

3. div를 사용하고 싶지 않으면 Fragment 컴포넌트를 사용합니다.

4. 함수 안에서 변수를 만들고 사용하고 싶으면 {name}를 사용합니다.

function App() {

const name = "홍길동";

return (
	<p> {name} </p> //홍길동
);
}

export default App;

 

5. if문 대신에 3항 연산자를 사용합니다.

 

6. 화면에 그리고 싶은 내용이 없다면 null을 반환합니다.

 

7.  undefined을 반환하는 상황을 만들면 안됩니다.

 

8. DOM에 직접 스타일을 하고 싶은 경우는 객체로 묶고 속성은 카멜표기법을 사용합니다.(단위생략시px)

 

9. class 속성 대신에 className을 사용합니다.

 

10. 홀로 사용하는 태그는 반드시 닫는 태그를 작성합니다.(슬래쉬는 무조건 뒤에넣기!)(예: {/* <input/> <br/> <img/> */} )

 

 

App.js

import logo from './logo.svg';
import './App.css';
import { Fragment } from 'react';

function App() {

    /* 주석 : alt+shift+a */

  const name = "중괄호"; //변수
  const age = 22; //변수
  const myStyle = {color:'red', backgroundColor:'yellow', fontSize :15};


  return (
    <Fragment>
      <ul>
          <li>1. 주석 alt + shift + a{/*  */}</li>
          <li>2. return 구문은 반드시 1개여야 합니다. 반드시 하나의 태그를 리턴해야합니다.</li>
          <li>3. div를 사용하고 싶지 않으면 Fragment컴포넌트를 사용합니다.</li>
          <li>4. 함수 안에서 변수를 만들고 사용하고 싶으면 {name}를 사용합니다.</li>
          <li>5. if문 대신에 3항 연산자를 사용합니다.</li>
          <li>6. 화면에 그리고 싶은 내용이 없다면 null을 반환합니다.</li>
          <li>7. undefined을 반환하는 상황을 만들면 안됩니다. (undefined는 렌더링은 가능하지만 권장하지 않는다.대신 null을 사용한다.)</li>
          <li>8. DOM에 직접 스타일을 하고 싶은 경우는 객체로 묶고 속성은 카멜표기법을 사용합니다.(단위생략시px)</li>
          <li>9. class 속성 대신에 className을 사용합니다.</li>
          <li>10. 홀로 사용하는 태그는 반드시 닫는 태그를 작성합니다.(슬래쉬는 무조건 뒤에넣기!)(예: {/* <input/> */})</li>
      </ul>

      <div className = "App" style = {myStyle}>
          {name === "중괄호" ? '중괄호입니다' : '중괄호가 아닙니다'}
          {name === "이순신" ? <h3>이순신입니다</h3> : <h3>이순신이 아니라 {name}입니다.</h3>}
          {age === 30 ? <h3>30살입니다</h3> : null}
      </div>
    </Fragment>
  );
}

export default App;