패스트캠퍼스 챌린지 7일차 - 리액트 JSX 알아보기

 

 

JSX 없이 사용하는 React

 

React는 자바스크립트 라이브러리로 JSX 를 사용하지 않아도 모든 것을 자바스크립트로 구현할수 있다.

그러나 리액트를 사용하면서 자바스크립트보다 JSX를 선호하는 이유는,

기존에 자바스크립트로 구현할수 있음에도 JQuery를 많이 사용했던 이유 중 하나,

자바스크립트로 작성된 코드가 JSX로 작성한 코드보다 길고 복잡하기 때문이다.

 

/* JSX */
class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.toWhat}</div>;
  }
}

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

/* JAVASCRIPT */
class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Hello ${this.props.toWhat}`);
  }
}

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

더 많은 예시보기

---

JSX 알아보기

 

- JSX는 자바스크립트를 확장한 문법이다.

 

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

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

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

ReactDOM.render(
  element,
  document.getElementById('root')
);

 

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

  JSX도 표현식이기 때문에 컴파일이 끝나면 JSX 표현식이 Javascript 함수를 호출하고 javascript 객체로 인식되기 때문이다.

  (즉, 변수, 파라미터, 반환값 등으로 사용가능하다)

 

- JSX는 HTML의 형식을 띄고 있어 Attribute를 가지고 있다.

  Attribute에 값을 넣을때 따옴표(문자열 리터럴)를 이용해서 리터럴을 직접 입력하거나

  중괄호를 사용해서 javascript 표현식을 넣어 간접적으로 값을 넣을 수 있다.

  둘은 다른 형식이기 때문에 하나의 Attribute에 동시 사용은 불가능하다.

 

- JSX는 html보다 javascript에 가깝기 때문에 attribute를 명명할때 camelCase 명명 규칙을 사용한다.

 

- JSX는 XSS 공격을 방지한다(보안)

  ReactDOM에서 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프하여 모든 항목은 렌더링 전에 문자열로 변환된다.

 

 

 

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

 

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.