이 글은 인프런 처음만난리액트를 보고 정리한 글입니다.

1강. JSX의 정의와 역할

리액트 사용할때 필수.
JSX? A sysntax extension to JavaScript. 자바스크립트의 확장 문법.
js의 문법을 확장시킨거.
문법을 어떤식으로 확장? js + xml/html (jsx의 x는 xml의 x로도 볼수있음)

const element = <h1>Hello, world!</h1>

왼쪽은 흔히 아는 js문법. 오른쪽은 html=> js+html => jsx

역할.
내부적으로 xml의 코드를 js코드로 변환하는 과정을 거짐.
실제로 jsx로 작성해도 최종적으로 js코드가 됨.

React.createElement(
  	//createElement의 파라미터
	type, //element의 타입. div,span,다른 react컴포넌트
    [props], //속성들
    [...children] //현재 element가 포함하고 있는 자식
  //배열로 되어있는 이유는, 여러개의 하위 컴포넌트를 가질 수 있음
)

jsx코드를 js코드로 변환하는 역할: React의 createElement라는 함수

//1번 코드
//Hello라는 이름을 가진 react 컴포넌트
class Hello extends React.Component {
	render() {
    	return <div>Hello {this.props.toWhat}</div>; //jsx
    }
}
//위에서 만들어진 컴포넌트를 ReactDOM의 render함수를 이용해 실제 화면에 렌더링함.
ReactDOM.render(
	<Hello toWhat="World" />,
    document.getElementById('root') //jsx
);

jsx사용한 코드가 모두 ✅React.createElement✅로 바뀌는것을 확인!!동일한 역할을 한다!! 1번 코드와 2번코드 동일한 결과를 만듦. jsx -> React.createElement

//2번 코드
//jsx를 사용하지 않은 코드. 순수 js만 이용.위 코드와 완전히 동일한 결과를 만듦
class Hello extends React.Component {
	render() {
    	return React.createElement('div', null, 'Hello ${this.props.toWhat}'); 
    }
}

ReactDOM.render(
	React.createElement(Hello, { toWhat: 'World' }, null),
    document.getElementById('root')
);

createElemnet를 사용하면 js의 객체가 나옴

jsx가 무조건인건 아닌데, jsx 사용하면 코드가 간결해지고 가독성이 올라가니까.. 그 외에도 장점이 많기때문에 사용권장

2강. JSX의 장점 및 사용법

코드가 간결해짐
가독성 향상. 버그를 발견하기 쉬움
Injection Attacks 방어. 잠재적 보안 위협 방어.

jsx 사용법
js+xml/html이기때문에 모든 js문법을 지원. 추가로 xml과 html을 섞어서 사용

• 리액트에서 {} 가 나오면 자바스크립트 부분을 쓰기 위해서 하는 것이라고 외워두는게 편하다.
  

• name이라는 자바스크립트 변수를 참조하기 위해서 사용

• formatUser라는 자바스크립트 함수를 호출하는 것을 볼 수 있다.

  

• 이렇게도 사용이 가능하다.

자식을 정의하는 방법

const element = (
	<div>
  			<h1>안녕하세요</h1>
  			<h2>반갑습니다.</h2>
  	</div>
)

여기서 div태그의 children은 h1태그와 h2태그이다.

실습

Book.jsx

import React from "react";

function Book(props) {
  return (
    <div>
      <h1>{`이 책의 이름은 ${props.name}입니다.`}</h1>
      <h2>{`이 책은 총 ${props.numOfPage}페이지로 이뤄져있습니다.`}</h2>
    </div>
  );
}
/* {} 자바스크립트 부분을 사용할 땐 {}로 사용한다. */
export default Book;

Libary.jsx

import React from "react";
import Book from "./Book";
const Library = () => {
  return (
    <div>
      <Book name="처음 만난 파이썬"></Book>
      <Book name="처음 만난 AWS"></Book>
      <Book name="처음 만난 리액트"></Book>
    </div>
  );
};

export default Library;

/*노트필기
1. jsx코드 작성 시 가독성이 높다. 우리가 보여주고 싶은 화면을 고칠 떈,
index.js파일을 수정해야된다.

*/

index.js

import React, { Fragment } from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import Library from "./chapter_03/Library";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <>
    <React.StrictMode>
      <Library />
    </React.StrictMode>
  </>
);
/* React-Dom을 사용하여 root-dom 노드에 렌더링하도록 하는 코드이다. */