React의 선언형 프로그래밍?

네비게이션처럼 지시.

웹브라우저에서 제공되는 네이티브 기술을 사용하지 않고, 컴포넌트 중심으로 설계하는 방식으로 interface 설계 → React나 Vue 사용하는 이유

CDN(Content Deleverly Network)를 사용해서 React를 빠르게 시작할 수 있다.

React 시작하기, es 정리, ts 시작하기가 목표

yamoo9님 깃에 있는 레포를 가져오기 위해 degit을 사용해보자

npm i -g degit
degit yamoo9/react-browser-starter react-browser

레포 가져오기 완료

git clone이라는 명령어와의 차이점

.git

.git으로 깃 관리를 하는데,

degit 사용하면 .git폴더가 복사되지 않는다.

그래서 하나의 깃으로 관리되고 있는 상태가 된다.

cd react-ssafy

하고 package.json보자

{
  "private": true,
  "scripts": {
    "dev:es": "live-server ./react-es/public --host=localhost --port=3000 --no-browser",
    "dev:ts": "live-server ./react-ts/public --host=localhost --port=4000 --no-browser"
  },
  "devDependencies": {
    "live-server": "1.2.2"
  }
}

live server에 의존하고 있고, 종속성 모듈이 메타데이터 정보파일인 package.json에 등록돼있다.

등록된 커멘드는 dev es, ts

npm i

종속성 패키지 설치

npm run dev:es

이후에 http://localhost:3000이라는 링크 뜨면 클릭

index.html가 화면에 뜨게 된다.

<script type="module" src="./main.js"></script>

원래 index.html에 main.js 불러오는 부분 없었는데, head안에 위 코드 넣으면 main.js가 활성화 된다.

React라는 도구를 사용할 수 있어야 하는데, Vue에서는 Vue의 cdn주소를 불러와서 사용했음.

React도 cdn주소가 있다.

react:cdn

치면

<script src="https://unpkg.com/react/umd/react.development.js" crossorigin></script>

가 뜬다.

React라는 도구를 사용할 수 있는지 보려면

실행되고 있는 창의 console로 간다.

전역에 있는 globalThis 라는 객체가 있다.

보통 js를 공부할 때 이야기 하는 window객체가 globalThis다. 이 안에 React가 존재한다.

React 사용 준비 끝

React 및 ReactDOM API 활용

build 시스템을 사용하지 않고 웹 브라우저에서 React가 어떻게 돌아가는가 보자

id = root영역에 h1 넣고, 단락요소p를 넣고싶다.

<div id="root">
      <h1 class="headline">React 라이브러리 활용하기</h1>
      <p class="catchphrise">
        React는 컴포넌트 주도 개발이 가능한 환경을 제공하는
        <abbr title="User Interface">UI</abbr> 라이브러리입니다.
      </p>
    </div>

abbr(축약어)로 UI를 구조화 해준다.

abbr은 title 속성값이 떠있는데, 여기에 flame?을 넣어준다.

지금은 하드코딩 했음

이제 이걸 React 로 변경 해 보자.

head 안에

<script>
	const container = document.getElementById('root');
	console.log(container);
</script>

root부분을 잘 잡았는지 확인하기 위해 console.log로 찍어본다. → 근데 null나옴

html, css, js를 브라우저가 해석할 때 js코드가 실행되는 시점에 html해석기인 parser가 어떤 일을 하는지 이해하고 있어야 알 수 있다.

현재는 script코드가 해석될 때 body내용은 읽히지 않은 상태이다. 문서의 요소가 존재하지 않으므로 대상을 찾을 수 없어서 null이 반환됐다.

이벤트 사용으로 해결 가능.(DOMContentLoded)

아니면 디퍼 속성? async나 type=”module”도 사용 가능

type=”module”사용하면 기존에 없던 js의 es모듈을 사용할 수 있기 때문에 대상요소에 접근 가능. 네트워크적 측면에서 해당 코드는 실제 문서가 완성된 이후에 처리되기 때문에 문서에 접근가능.

script안에 const container는 actual 요소.

React에서 사용하는 것은 Vue에서 사용했던 것처럼 vritual element.

virtual element는 React의 element.

그래서 react의 element를 어떻게 생성하는가를 이해할 필요 있음.

우선 h1부분을 react로 생성 해 보자.

h1 : 문서 내에 한 번만 포함 돼야 한다.

class라는 attribute를 가지고 있어야 하고, attribute가 headline이어야 한다.

내부에 있는 text Content는 React 라이브러리 활용하기 라고 구성 돼야 한다.

DOM script로 작성 할 때는 document.createElement(h1)해서 만든다.