JSX문법이란?

• JS의 확장 문법 (HTML+JS)
• 브라우저에서 실행하기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 JS형태의 코드로 변환됩니다.

컴포넌트만드는 방법

src디렉토리 안에 새로운 파일을 만든 후, 기능을 대표하는이름.js로 만든다
리액트는 기본적으로 자바스크립트로 동작을하니까 확장자를 js로 해서 만든다.(jsx라고해도 무방하다)
예시

//Myheader.js

const Myheader = ()=>{
    return <header>이것은 헤더</header>
};

export default Myheader;

////Myfooter.js

const Myfooter=()=>{
    return <footer>이것은 풋터</footer>
};

export default Myfooter;

Myheader.js와 Myfooter.js 파일을 만들어주었다. 맨마지막줄에는 export default 내보내고자하는 이름; 을 넣어줘야 컴포넌트를 사용하고자하는 메인 js에서 import해올 수 있다.

//App.js

import Myheader from"./Myheader"
import Myfooter from"./Myfooter"

const App = () => {
  return (
    <div>
      <Myheader/>
      <Myfooter/>
      <header>
        <h2>안녕 리액트</h2>
      </header>
    </div>
  );
}

export default App;

import 내보내고자했던이름 from "./파일명"으로 컴포넌트를 사용할 수 있게 설정을 해준다.
이렇게 설정을 하고 홈페이지를 보면 아래와같이 표현이 되는것을 확인 할 수 있다.

JSX 문법의 특징

1.반드시 모든 태그를 닫아줘야 한다.

(=셀프클로징 태그<@@/>)

열린태그로만 작성을한다면 JSX 요소 'img'에 닫는 태그가 없습니다. 라는 에러가 일어난다.
= 닫힘태그가 없는 태그들<img>,<br>,<meta>,<input>,<source>,<link>,<track>,<base> 등등을 그냥쓰면 에러가 일어나므로 반드시 끝에 /로 닫아줘야 한다.

2.최상위태그 규칙(부모태그)

만약 부모태그없이 JSX문법을 사용한다면, JSX expressions must have one parent element라는 알림이 뜬다.
보통<div>,</div> 로 감싸주는데, 안묶고 싶다면 React.Fragment 기능을 써야한다 쓰는방법은 import React form 'react';를 상위에 써주고, 안묶고싶은 컴포넌트에<React.Fragment>,</React.Fragment>혹은 빈태그 <>,</>로 감싸준다.

import React from "react";
import Myheader from"./Myheader"
import Myfooter from"./Myfooter"

const App = () => {
  return (
    <React.Fragment> //또는 <>
      <Myheader/>
      <Myfooter/>
      <header>
        <h2>안녕 리액트</h2>
      </header>
    </React.Fragment> //또는 </>
  );
}

export default App;

이렇게 감싸는 이유는, 리액트가 사용하는 Virtual DOM 방식에서는 컴포넌트 변화를 감지할 때 효율적으로 비교하고자 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문

app.js에서는 React.Fragment기능을 이용하기위해 리액트를 인포트(import React form 'react';)했는데, myheader.js와 myfooter.js에서는 인포트한적이 없다
즉, 리액트기능을 이용하지않는 컴포넌트에서는 리액트를 인포트하지않아도 상관없다.

3.css스타일링

최상위태그에 원래 class=""로 지정해주고 스타일링을 했는데, JSX에서는 class라는 단어가 JS의 예약어이기때문에 사용이 불가능하다.
그래서 JSX에서는 className=""이렇게 사용한다.

//App.js

import Myheader from"./Myheader";
import Myfooter from"./Myfooter";
import "./App.css";

const App = () => {
  return (
    <div className="App">
      <Myheader/>
      <Myfooter/>
      <h2>안녕 리액트</h2>
    </div>
  );
}

export default App;

//App.css

.App {
  background-color: blueviolet;
  text-align: center;
}

h2 {
  color: brown;
}

(css스타일링방식)
css파일에 .지정한className{하고싶은 스타일넣기(예:background-color:red;)} 기존방식대로 할 수도 있고

import Myheader from"./Myheader";
import Myfooter from"./Myfooter";

const style={
  App:{
    backgroundColor: 'blueviolet',
    textAlign: 'center'
  },
  h2:{
    color: 'brown'
  }
};

const App = () => {
  return (
    <div style={style.App}>
      <Myheader/>
      <Myfooter/>
      <h2 style={style.h2}>안녕 리액트</h2>
    </div>
  );
}

export default App;

(인라인스타일링방식)
js파일에 스타일을 넣을 수 있다.
const style={점 없이 지정한className:{하고싶은 스타일넣기(예:backgroundColor:'red';}, 점 없이 지정한className:{하고싶은 스타일넣기}등등 객체들로 넣음}로 지정을하고 최상위태그에 style={style.App}을 넣으면 적용이 된다.

4.JSX에 JS값을 사용하는 방법

JSX문법은 중괄호표기법{}을 사용하여 변수를 동적으로 출력할 수 있다.

const App = () => {
  let name = "현정"; 
  return (
    <div>
      <header>
        <h2>안녕 리액트 {name} </h2>
      </header>
    </div>
  );
}

let name = "현정"; JSX내부에 {name}으로 포함하여 값을 렌더링한 것 처럼
JSX는 JS의 변수나 값을 포함할 수 있다.
변수 말고도 {1+2} 이런 표현식도, {"가나다"} 문자열도, {abc()}함수도 가능하다.
숫자나 문자가아닌 false 나 []배열을 넣으면 렌더링이 안된다.

즉, JSX의 중괄호안에는 값을 포함할 수 있지만, 숫자나 문자열만 포함할 수 있다.

이 특성을 이용해서 {number%2===0?"짝수":"홀수"} 삼항연산자를 이용해서 조건에 따라 각각 다르게 렌더링도 가능하다!!
이런걸 조건부렌더링이라고 부른다(꼭 알아두기)

5. 주석

JSX 내부의 주석은 {/* 주석할 내용 */} 이렇게 작성합니다.
열리는 태그 내부에서는 //를 사용하면 된다.

6. JS 값 사용할 때에는 {}를 사용한다.