ch01.JSX

Yarn 패키지가 자동으로 생성해준 React코드 살펴보기

import React from 'react';//리액트를 불러와서 사용 가능 하도록 해준다.
import logo from './logo.svg';//svg, css import
import './App.css';


function App() {//function 키워드를 통해 컴포넌트를 만든다 -> 함수형 컴포넌트
  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;

• 번들러 : 파일을 묶듯이 여러개의 모듈들을 연결한다.
  • 대표적인 번들러 : 웹팩,parcel,browserify(리액트에서는 웹팩이 추세이다)
  • 번들러 도구를 사용하면 import로 모듈을 불러왔을때 불러온 모듈을 하나로 합쳐 하나의 파일을 생성해 준다
  • 웹팩을 사용하게 되면 SVG,CSS 파일도 불러서 사용가능(웹펙의 로더라는 기능이 담당)
• Return 하는 값 
  • JSX : 자바 스크립트의 확장 문법이며 XML과 유사하다
  • 브라우저에서 실행되기 전에 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

  • //예시
    
    functio App(){
           return (
            <div>
            Hello<b>react</b>
            </div>
      )
      /* 변형 후*/
      function App(){
        return React.createElement("div",null,"Hello ",React.createElement("b",null,"react"));
      }
     }

JSX의 장점

• 보기 쉽고 익숙하다
• 높은 활용도
  • div나 span 같은 HTML 태드를 사용할 수 있을 뿐 아니라 앞으로 만들 컴포넌트도 JSX안에서 작성 할수 있다.
  • index.js를 살펴보면 App컴포넌트를 HTML태그 쓰듯이 사용한다

  • import React from 'react';
    import ReactDOM from 'react-dom';//ReactDOM.render : 컴포넌트를 페이지에 렌더링,react-dom모듈을 불러와 사용 가능 
    import './index.css';
    import App from './App';
    import reportWebVitals from './reportWebVitals';
    //parameter 1 : 페이지에 랜더링할 내용(JSX형태), parameter 2 : 해당 JSX 랜더링할 document 내부요소 설정 
    //현재는 root로 설정이 되어있는데 root는 public/index.html파일 밑에 <div>의 id이다.
    //<React.StrictMode> : 리액트프로젝트에서 리액트 레거시기능들을 사용하지 못하게 하는 기능 -> 문자열 ref,componentWillMount 등 나중에 완전히 사라지게될 옛 기능 사용시 경고 출력
    ReactDOM.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
      document.getElementById('root')
    );