리액트 공식문서 읽기 - 주요개념(Hello World, JSX 소개)

Hello World

가장 단순한 React 예시

 

JS(Babel)

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>);

 

html

<div id="root">
    <!-- This element's contents will be replaced with your component. -->
</div>

 

 

JSX 소개

React의 특성

• 렌더링 로직이 UI로직(이벤트 처리 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들임.
• 별도의 파일에 마크업과 로직을 넣어 기술을 분리하는 대신, 둘 다 포함하는 `컴포넌트`라는 느슨하게 연결된 유닛으로 관심사를 분리한다.
• JSX가 필수는 아니다. 

 

JSX

cost element = <h1>Hello, world!</h1>;

• JavaScript를 확장한 문법
• js 코드 내에서 UI 관련 작업을 할 수 있도록 해주기 때문에 시각적으로 도움이 된다.  
• JSX는 React 엘리먼트를 생성한다.

 

JSX에 표현식 포함하기

const name = "A";
const element = <h1>Hello, {name}</h1>;

• JSX의 중괄호 안에는 유효한 모든 JS 표현식을 넣을 수 있다.

 

JSX도 표현식이다

 👉 컴파일이 끝나면, JSX 표현식은 정규 JS 함수 호출이 되고 JS 객체로 인식된다.

즉, JSX를 `if`구문 및 `for` 루프 안에 사용하거나 변수에 할당하고 인자로 받아들이고, 함수에서 반환할 수 있다.

 

❗
JSX는 HTML보다 JS에 가까우므로, React DOM은 HTML 속성 이름(=소문자 장려) 대신 `camelCase` 프로퍼티 명명 규칙을 사용한다.

 

 

JSX 태그는 자식을 포함할 수 있다 (div 태그 내에 div 태그 가능)

 

 

JSX는 주입 공격(XSS)을 방지한다

• XSS(cross-site-scripting): 악의적인 사용자가 공격하려는 사이트에 스크립트를 넣는 취약점 공격 방법. 공격에 성공하면 사용자가 사이트에 접속할 시 강제로 스크립트가 실행된다.
• 기본적으로 React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프하기 때문에, 애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않는다.
• HTML에서 `이스케이프하다`의 의미: <, >, ", &등의 문자를 화면에 표시하기 위해 <는 '&lt;', >는 '&gt;' 등으로 변경하는 일.
• 모든 항목은 렌더링 되기 전 문자열로 변환되며, 이런 특성으로 인해 XSS(cross-site-scripting) 공격을 방지할 수 있다.

 

JSX는 객체를 표현한다

Bable은 JSX를 `React.createElement()` 호출로 컴파일한다.

const element = <h1 className="greeting">Hello, world!</h1>;

const element = React.createElement("h1", { className: "greeting" }, "Hello, world!");

위의 두 코드는 동일한 코드이다.

`React.createElement()` 는 버그 없는 코드를 작성할 수 있도록 몇 가지 검사를 수행하며, 기본적으로 아래와 같은 `React 엘리먼트` 객체를 생성한다.

const element = {
  type: "h1",
  props: {
    className: "greeting",
    children: "Hello, world!",
  },
};

 👉 React 엘리먼트는 화면에서 보고 싶은 것을 나타내는 표현이다. React는 이 객체를 읽어 DOM을 구성하고 최신 상태로 애플리케이션을 유지한다.

 

 

 

---

공부에 참고하면 좋을 블로그

누구든지 하는 리액트 3편: JSX | VELOPERT.LOG

 

🏊 React의 JSX 파고들기

JSX는 무엇인가 (정의, 장점, 규칙, 컴파일)