1. JSX소개

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

• 위에 희한한 태그 문법은 문자열도, HTML도 아닙니다.

  JSX라 하며 JavaScript를 확장한 문법입니다. UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장합니다. JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JavaScript의 모든 기능이 포함되어 있습니다.

• JSX는 React “엘리먼트(element)” 를 생성합니다.

2. JSX란?

• React에서는 본직적으로 렌터링 로직이 UI로직과 연결된다는 사실을 받아들입니다.

  → UI로직 : 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등

• React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다.

• React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다.

3. JSX도 표현식 입니다.

• 컴파일이 끝나면, JSX 표현식이 정규 JavaScript 함수 호출이 되고 JavaScript 객체로 인식됩니다.

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

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

4. JSX 속성 정의

• 어트리뷰트(속성)에 따옴표를 이용해 문자열 리터럴을 정의할수 있습니다.

  const element = <div tabIndex="0"></div>;
  

• 중괄호를 사용하여 어트리뷰트(속성)에 JavaScript 표현식을 삽입할 수도 있습니다.

  const element = <img src={user.avatarUrl}></img>;
  

  • 어트리뷰트(속성)에 JavaScript 표현식을 삽입할 때 중괄호 주변에 따옴표를 입력하지 마세요. 따옴표(문자열 값에 사용) 또는 중괄호(표현식) 중 하나만 사용하고, 동일한 어트리뷰트에 두 가지를 동시에 사용하면 안 됩니다.

⚠️ JSX Attribute(속성)

JSX는 HTML 보다는 JavaScript에 가깝기 때문에, React DOM 은 HTML Attribute 이름 대신 camelCase(카멜 케이스) 프로퍼티 명명 규칙을 사용합니다.

예를들어, JSX 에서 class 는 className이 되고, tabindex는 tabIndex가 됩니다.

5. JSX는 주입 공격을 방지합니다.