TIL: React | [공식문서 읽기] Hello World, JSX - 221206

가장 간단한 리액트 컴포넌트

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

JSX

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

JSX는 엘리먼트를 생성한다

React는 렌더링 로직이 UI 로직과 연결되어있다는 사실을 인정하고
JSX는 자바스크립트를 확장하여 마크업과 로직을 함께 사용한다
기술을 인위적으로 분리하는 대신 모두 포함하는 컴포넌트라는 느슨하게 연결된 유닛으로 관심사 분리

JSX 사용이 필수는 아니지만 대부분 UI 작업 시 시각적으로 더 도움이 된다

JSX에 표현식 포함하기

JSX 의 중괄호 안에는 유효한 모든 자바스크립트 표현식을 넣을 수 있다

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

JSX도 표현식이다

컴파일이 끝나면 JSX 표현식이 정규 자바스크립트 함수 호출이 되고
자바스크립트 객체로 인식된다

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

JSX를 if 구문 및 for loop 안에 사용하고,
변수에 할당하고, 인자로서 받아들이고, 함수로부터 반환할 수 있다

태그가 비어있다면 XML 과 같이 바로 닫아준다
JSX 태그는 자식 태그를 포함할 수 있다

JSX 는 사용자 입력을 제외한 주입 공격을 방지한다
React DOM 은 모든 값을 렌더링 하기 이전에 이스케이프 하므로
애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않는다
모든 항목은 렌더링 이전 문자열로 변환
이러한 특성으로 XSS (cross-site-scripting) 공격을 방지할 수 있다

JSX는 객체의 표현

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

아래 두 코드는 동일하다

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

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

이는 버그가 없는 코드를 작성하는 데 도움이 되도록 검사를 수행,
아래와 같은 객체를 생성한다

// 주의: 다음 구조는 단순화되었습니다
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

이러한 객체를 React 엘리먼트 라고 한다
화면을 구성하는 표현
React는 React 엘리먼트를 읽어 DOM을 구성하고 최신 상태로 유지

팁
ES6 및 JSX 코드가 올바르게 표시되도록 편집기에 “Babel” 언어 설정을 사용하는 것을 권장합니다