[ React ] JSX와 JSX문법 이해하기

📌 JSX란 ?

JS의 확장 문법으로 html에 js 코드를 녹여낸 확장자의 형태입니다. 코드를 수정하면 자동으로 리렌더링됩니다. (webpack의 역할)

이때, Webpack Loader는 직접 설치 및 설정 가능하고 보일러플레이트로 생성 시 자동으로 설정됩니다. 

Webpack Loader는 다양한 종류가 있습니다.

- css 로더 : css를 로드합니다.

- file 로더 : 폰트, 이미지, 파일 등을 로드합니다.

- babel 로더 : ES6문법을 ES5문법으로 다운그레이드합니다. (webpackConfig.js)

 

 

 

📌 JSX 문법

✔︎ VS Code(Visual Studio Code)에서는 Alt + Shift + A를 사용하여 JSX 주석을 작성할 수 있습니다.

{/* JSX의 주석은 이렇게 사용합니다 */}

---

✔︎ JSX는 반드시 하나의 최상위 태그를 return합니다. <div>를 사용해서 묶어도 되고 <Fragment> 또는 <></> 모형으로 묶으면 됩니다.

function App() {
  return (
    <Fragment>
      <p>hello world</p>
    </Fragment>
  )
}

---

✔︎ 변수값을 사용할 때는 중괄호 {name}, {age} 으로 참조합니다.

const name = '리액트';
return <h3>{name}문법이해하기<h3>;

---

✔︎ if문 대신 3항연산자 ( condition ? true : false ) 를 이용하여 조건부 렌더링을 구현합니다.

 

return <div>{isActive ? 'ok' : 'no'}</div>

 

---

✔︎ 화면에 보여주고 싶은 값이 없다면 null을 이용합니다.

{age === 20 ? <h6>20세입니다.</h6> : null }

 

---

✔︎ undefined를 반환은 금지합니다.

JSX에서 undefined를 반환하면 렌더링 오류나 예기치 않은 빈 화면이 나타날 수 있기 때문에, 명확한 의도를 전달하기 위해 null을 사용해야 합니다.

null은 아무것도 렌더링하지 않겠다는 의도를 명확히 표현합니다.

const example = undefined;

return <div>example</div>

---

✔︎ DOM요소에 스타일을 직접 넣을 때에는 반드시 객체형 객체로 묶고 속성은 카멜 표기법을 사용합니다. (단위 생략 시 px 기본값)

 <div style={{color : 'red', background : "yellow", fontSize : 20}}>

 

---

✔︎ class 대신 className을 사용합니다.

   <div className="example">

 

---

✔︎ 홀로 사용하는 태그는 닫는 태그를 반드시 작성합니다.

<input type="text"/>
<img src="img1.png"/>
<br/>
<hr/>