• react는 브라우저에서 돌아가야해서 devdependency 말고 dependency로 설치해주세요

  devdependency로 이미 깔았다면, 삭제 후 새로 깔아야됩니다

  pnpm remove react → pnpm add react

• react에서 value를 쓰면 고정됨

• button type은 submit, reset, button, menu

• 길잃은 캡쳐

jsx ≠ react

react에게 jsx가 필수는 아닙니다 !

//javascript
const element = React.createElement('div', null, 'Hello, World!');

//jsx
const element = <div>Hello, World!</div>;

🙂 jsx는 추상화 ( 유사 html 로 보이게 함으로써 복잡성을 줄이고 더 쉽게 접근할수 있도록 함 ) 수단으로 이해하면 될 듯

compiler

typescript을 사용한 JS 컴파일 과정

js는 브라우저에서만 오류를 확인할 수 있으나, ts는 에디터에서 확인 가능해 협업하기가 좋아요 🙂

• 웹 브라우저에서 실시간 컴파일(with typescript service)

  웹브라우저에서 ts를 이해할수 없어서 typescript service라는 실시간 컴파일러를 이용😀

  • script 호출

  

  • loadModule(파일경로, 컴파일러 옵션)

    : ts-browser.js 모듈에 있는 loadModule 함수로, 동적으로 로드하고 실행하는 기능

  • jsx: ts.JsxEmit.React

    : typeScript 컴파일러가 jsx을 어떻게 처리할지 설정. 해당 파일이 reactJSX 코드를 사용하고 있음을 명시해 줌

• Node.js 런타임 환경에서 컴파일

  • pnpm add typescript : vite에선 tsx를 해석할 수 있지만 , typescript를 설치해 사용함 !

    → 설치 확인 : npx tsc —version

  • pnpm add @types/react @types/react-dom -D : 선언되어있는 타입 읽어오려면 설치해줘야 됨

  //package.json
  {
  	"scripts": {
  		"dev": "vite",
  		**"compile:ts": "tsc ./src/lecture/10-typescript-compiler.tsx --target es5"**
  	},
  }
  

  

  어머 var 뭐임?; 옵션인자에 —target es6 해주면 됩니다🙂

  → "compile:ts": "tsc ./src/lecture/10-typescript-compiler.tsx --target es6"

  

  //문서에 id = root인 요소가 없으면 null이기에, HTMLElement로 type을 단언할수 있음
  const rootElement = document.getElementById("root") as HTMLElement;
  const root = createRoot(rootElement);
  
  //root.render 안에는 react 요소를 넣어줘야 하며, 리액트 요소를 리턴하는 함수여도 괜찮습니다 ! 
  root.render(createApp());
  

JSX 슬롯{ 식 : expression }

JSX 내부에 데이터를 끼워 넣기 !

• JSX 내부 슬롯 안에선 문은 사용할수 없음 (값을 리턴x)

  무조건 함수 호출 ,식 으로 작성

  문을 쓰고 싶다면 함수 스코프 내부에서 문을 작성한 뒤 넘겨주거나 분리해줍시다 😉

  • example