[REACT] 코드 살펴보기

[REACT] REACT 란

---

코드 살펴보기

index.js

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

• React.StricMode : 옛날 기능을 사용할때 경고를 출력하는 기능
•  root의 render함수는 App컴포넌트를 화면에 그리는 기능

---

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;

• return (JSX) 문장을 반환
• export default App 로 모듈을 내보낸.
• Index.js 파일에서 <App/> 로 사용
• function App() {} 안을 JSX라고 부른다.

JSX 란

JS의 확장 문법 (HTML에 JS코드를 녹여낸 형태)
코드를 수정하게 될 때 자동으로 화면이 리렌더링 된다. (웹팩 로더가 동작)
Webpack Loader는 직접 설정(커스터마이징)도 가능하고, create react-app 생성시 자동으로 해준다.


※ JSX의 주석 alt + shift + a

JSX 문법 
1. 반드시 하나의 태그를 return 해야함
2. div를 사용하기싫다면 Fragment컴포넌트를 이용하면 된다.
3. 함수안에서 만들어진 변수는  중괄호 {name} 로 참조할 수 있다.
4. if문 대신 3항연산자를 이용한다.
5. 화면에 보여주고싶은게 없다면 null을 이용한다.
6. undefind을 반환하는 상황을 만들면 안 된다.
7. DOM요소에 스타일을 직접 넣을때는 반드시 객체형 객체로 묶고 속성은 카멜 표기법을 사용한다.
8. class대신 className을 사용함.
9. 홀로 사용하는 태그는 닫는태그를 반드시 작성한다.

---

React의 오류 화면

너무 살벌하다... 이런 놈은 또 첨일세...