JSX (JavaScrpit + XML/HTML)

기존의 JavaScript에 XML과 HTML 태그들을 사용할 수 있게 해주는 것

예시

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

React.createElement()

ReactDOM에 렌더링되는 JS 객체를 생성해준다.

React.createElement(
  type,				// element의 유형 (HTML 태그나 React 컴포넌트)
  [props],			// 파리미터
  [...children]		// 자신의 자식 element
)

// 반환값
// {
//   type: 'h1',
//   props: {
//     className: 'greeting',
//     children: 'Hello, World!'
//   }
// }

JSX를 쓰면, React.createElement()를 쓰지 않아도 된다.

jsx 버전

class Hello extends React.Componet {
  render() {
    return <div> Hello {this.propstoWhat}</div>;
  }
}

ReactDOM.render(
  <Hello toWhat="World"/>,
  document.getElementById('root')
);

js버전

class Hello extends React.Componet {
  render() {
    return React.createElement('div', null, 'Hello ${this.props.toWhat}');
  }
}

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

장점

위의 예시처럼 JSX를 쓰면 React.createElement를 쓰지 않아도 Compoent를 생성할 수 있다. 그럴 경우 다음과 같은 장점이 있다.

• 간결한 코드
• 가독성이 좋다
• 유지보수가 쉬움

Injection 공격 방어

Injection 공격
웹 입력값으로 실행되는 코드를 전달하여, 서버의 정보를 추출하는 해킹법

기본적으로 React DOM은 렌더링하기 전에 괗호 안의 값을 문자열로 치환하기 때문에, 사전에 명시되지 않은 값이라면 괄호 사이에 들어갈 수 없다.

사용법 (간단하게)

{}

XML, HTLML 코드 사이에 {}를 추가하면, 그 부분만 JS 문법이라고 명시하는 것이다. 따라서 이 부분에 변수나 함수를 추가하면 된다.

자식 컴포넌트를 생성하는 방법

그냥 기존에 XML, HTML 작성하던 것처럼 하면 됨

---

Referance

[인프런] 처음 만난 리액트(React) 강의 - 소플