[React] JSX란?

jJSX

• 공식 홈페이지(JSX)
• 관심사 분리(유튜브)

// 문자열도 HTMl도 아닌 코드
const element = <h1>Hello, world!</h1>;

자바스크립트를 확장한 문법, React Element를 생성한다.

Expression

모든 자바스크립트 표현식이 사용 가능하고 { }를 사용하여 감싸면 된다.

const name = 'Eunsoo';
const el = <h1>{name}</h1>;

Compile

Babel's doJSX => React.createElement() => React Element

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!'
  }
};

Attributes, Inline Style

JSX는 HTML보다는 JavaScript에 가깝기 때문에, React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용한다. e.g. JSX에서 class는 className가
되고 tabindex는 tabIndex가 된다.

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

React 에서 스타일을 적용할 때는 문자열 형태로 넣는것이 아닌 객체 형태로 넣어줘야한다.

const style = {
  backgroundColor: 'black',
  fontSize: '48px',
  fontWeight: 'bold'
}

XSS 방지

• 기본적으로 React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프 하므로, 애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않는다.
• 모든 항목은 렌더링 되기 전에 문자열로 변환된다.

Tag

컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야함, Virtual Dom에서 컴포넌트 변화를 감지할 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 Dom트리 구조로 이루어져야 한다 라는 규칙이
있음

조건

표현식안에서는 if 조건문을 사용할 수 없지만 외부에서는 가능하다.

// 표현식 외부에서 if 문
function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

AND(&&)

• true && expression은 항상 expression으로 평가된다.
• false && expression은 항상 false로 평가된다.

따라서 && 뒤의 엘리먼트는 조건이 true일때 출력이 됩니다. 조건이 false라면 React는 무시합니다. false로 평가될 수 있는 표현식을 반환하면 && 뒤에 있는 표현식은 건너뛰지만 false로 평가될
수 있는 표현식이 반환된다.

// && 조건이 true일 경우 expresssion을 출력 false일 경우 null
console.log(true && 1 > 0 && 'success'); //success 
console.log(true && 1 < 0 && 'success'); //false 

OR(||)

• true && expression은 항상 true 평가된다.
• false && expression은 항상 expression으로 평가된다.

// || 조건이 true일경우 조건 출력 false일 경우 expression 출력
console.log(1 > 0 || 'success'); //true 
console.log(1 < 0 || 'success'); //success

const App = () => {
  const name = undefined;
  return name;
}
export default App

리엑트 컴포넌트의 함수에서 undefined를 반환하는 경우 리엑트에서 오류를 발생시킨다. || 연산을 사용하여 값이 undefined일 경우 기본값을 설정하여 오류를 피할 수 있다.

const App = () => {
  const name = undefined;
  return name || '값이 없다.';
}
export default App

반면 JSX 내부에서 undefined를 렌더링 하는것은 오류가 나지 않는다.

const App = () => {
  const name = undefined;
  return <h1>{name}</h1>;
}
export default App

Comment

{/* 이렇게 */}