[React] JSX 문법 알고 싶으면 이리온 : )

 

 

 

---

 

👩‍💻 본격적으로 JSX 문법에 대해 살펴보기 전에 리액트 코드를 먼저 살펴보고자 한다

 

1️⃣ index.js

  const root = ReactDOM.createRoot(document.getElementById('root'));

  root.render(            
  	 <React.StrictMode>   
   	    <App />          
	 </React.StrictMode>
  );

 

root의 render 함수는 App 컴포넌트를 화면에 그리고, 함수 내부에 있는 <React.StrictMode>는 옛날 기능을 사용할 때 경고를 출력하는 기능을 한다

 

 

 

2️⃣ App.js

  import React from 'react';
  import logo from './logo.svg';
  import './App.css';

  function App() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }

  export default App;

 

  App 함수는 return문을 반환한다 ( return문 내부에서 JSX 문법이 들어감 )
 export default App으로 모듈을 빼내면, Index.js 파일에서 <App/>로 사용된다

 

 

그렇담 JSX는 정확히 무엇인가?

  JS의 확장 문법으로 (HTML에 JS코드를 녹여낸 형태)이다

 

  코드를 수정하게 될 때 자동으로 화면이 리렌더링 된다! ( 웹팩 로더가 동작 )

  Webpack Loader는 직접 설정도 가능하고, create react-app 생성시 자동으로 해준다

 

 

 Webpack Loader는 다양한 종류 有

1️⃣ css로더 - css로더
2️⃣ file 로더 - 폰트, 이미지, 파일 등 로드
3️⃣ babel 로더 - ES6문법을 화면에서 사용할 ES5문법으로 다운그레이드 해서 변환

---

 

JSX 문법 공부를 본격적으로 시작해볼까?

 

 

 

위의 내용이면 JSX를 다 봤다고 해도 무방하다 ( Maybe...? ) 

하나하나 살펴보면서 어떻게 실행되는지 제대로 알고 가자!

 

1️⃣ 주석

  주석 : alt + shift + a
  중괄호 안에 주석을 달 내용을 넣어줘야 한다 👉 { /* 주석 */ }

 

2️⃣ return 구문

  return 구문은 반드시 하나여야 한다 ( 하나의 태그만 리턴해야 함 )

 

3️⃣ Fragment

  div 태그 대신에 사용할 수 있다

 

4️⃣ 함수 내부에서 선언된 변수

  함수에서 만들어진 변수는 중괄호 {원하는 변수명}으로 참조할 수 있다

 

 

  App함수 내부에 있는 변수인 name과 age를 참조하려면 {name}, {age}로 하면 된다

 

 

5️⃣ 3항 연산식

  If문 대신에 3항 연산자 이용한다

 

 

6️⃣ null

  화면에 보여주고 싶은 게 없을 경우 null을 이용하면 된다

 

7️⃣ undefined

⚠️ undefined을 반환하는 상황을 만들면 안 된다!

 

 

8️⃣ DOM요소에 Style 넣기

DOM 요소에 스타일을 직접 넣을 때는 반드시 객체형 객체로 묶고 속성은 카멜 표기법을 사용한다

 

 

9️⃣ className

 태그를 불러오기 위한 수단으로 class를 이용했었는데 JSX에서는 className 사용한다

 

 

🔟 외로운 태그

홀로 사용하는 태그는 닫는 태그를 반드시 작성해야 한다  👉  < app/ >