리액트 jsx와 html의 차이

의문: 화살표 함수의 뒤의 괄호가 중괄호가 아니어도 괜찮나?
답: 리턴이랑 중괄호를 같이 생략해 바로 함수의 값이 나오도록 함.

typeScript를 사용한 리액트

ts객체를 데려와서 그 안의 JsxEmit.React를 가져와 연동이 되도록 함.
이렇게 스크립트로 가져오는 이유는 typescript에서는 import로 https를 불러오는 것이 안됨

ts 를 js로 변환

타입스크립트
설치 후 pakage.json 설정

{
	"scripts": {
		"dev": "vite",
		"compile:ts": "tsc ./src/lecture/10-typescript-compiler.tsx --target es5"
	},
	"devDependencies": {
		"typescript": "^5.3.3",
		"vite": "^5.0.11"
	}
}
//여기서 compile:ts 의 : 는 구분자 역할을 함.
// ex) compile:ts, compile:jsx

tsx 를 js로 변환

jsx는 react, target은 esnext, mouleResolution은 bundler, module은 esnext로 설정한다

슬롯

jsx에 데이터를 끼워넣기 위해 위해 사용하는 것
문과 식의 차이: 문은 반환값이 없고 식은 있음

슬롯 안에는 문이 들어갈 수 없음!

쓰고 싶다면 문이 들어간 함수를 작성하던가,
같은 함수 내라면 다른 곳에 문을 작성해 전달해야함

구조분해 할당

const createApp = (data, isDisabled = false) => {
  const {
    greetingMessage: [firstMessage, lastMessage],
    message,
  } = data;
  return (
    <div id="app">
      <h1>
        {firstMessage.toUpperCase()} 
//여기서 firstMessge를 greetingMessage[0]으로 입력하면 에러가 됨.
//구조분해 할당을 한번 더 했기 떄문에 firstMessage가 값이 되기 때문
        {/* js 주석 */}
        {/* <br /> */}
        {/* {' '} 띄워쓰기 하는 법 */}
        {lastMessage.toUpperCase()}
      </h1>
      <p>{message}</p>
      <form>
        <input aria-label="중요도" type="range" disabled={isDisabled} />
        <button type="button">보내기</button>
      </form>
    </div>
  );
};

const rootElement = document.getElementById("root");
const reactDomRoot = createRoot(rootElement);

/* 함수 실행 => JSX -> React.createElement() -> 리액트 요소 : ReactElement */
reactDomRoot.render(createApp(data, { label: "important", isDisabled: false }));
//react는 값이 비면 출력하지 않음.

jsx와 html 의 차이

1.jsx 에서는 self-close 을 해줘야함. (html은 해도/안해도 됨)

<input/>
<img/>

같이 닫아줘야함

2. jsx 에서는 예약어를 사용하면 안됨(html은 예약어가 뭐임?)

   class, for, if, while, switch, break, ...
   때문에 html의 class, for 속성의 경우 className, htmlFor로 바꿔서 써줘야 함

3. jsx는 대소문자를 구분함(html은 구분x)

4. jsx의 속성에 들어가는 - 은 사용 할 수 있음(data-,aria- 자체적으로 인식해서 변환)

 <input
          data-identity="searchKeyword"
          type="search"
          placeholder="검색"
          aria-label="키워드 검색"
        />

5. jsx는 style 속성 값을 객체로 설정(엄격) (html) style 속성 값을 문자로 설정
6. jsx의 공백 {' '} html의 공백  
7. jsx의 SVG data-, aria- 가 아닌 다른 속성값들은 -가 아닌 대문자로 뒤에 이어지는 글자를 받아와야 함

접근성트리

개발자 모드에서 켤 수 있음.