[REACT_MEMO] 파워노트3

# JSX

리액트를 사용하고 개발할 때 필수로 사용하는 것

 

# JSX의 개념

리액트의 공식명칭은 리액트 JS

JSX는 A syntax extension to Java Script(JavaScript의 확장 문법)

JSX는 JS와 연관 있음

JSX는 Java Script + XML/HTML 합친 것

 // JSX 코드

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

 

 

# JSX의 역할

내부적으로 XML/ HTML 코드를 JavaScript로 변환하는 과정을 거친다.

최종적으로는 자바스크립트 코드로 나오는 것.

 // JSX를 사용한 코드

 class Hello extends React.Component{

    render(){

          return <div>Hello {this.props.toWhat}</div>

     }

 }

 ReactDOM.render(

     <Hello toWhat="world" />

     document.getElementById('root')

 );

 

 // JSX를 사용하지 않은 코드

 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를 사용한 코드

 const element = (

      <h1 ClassName="greeting">

           Hello, world!

      </h1>

 )

 // JSX를 사용하지 않은 코드

 const element = React.createElement(

      'h1',

      { className: 'greeting'},

      'Hello, world!'

 )

 

React.creatElement()의 결과로 아래와 같은 객체가 생성된다.

이를 'React element'라고 한다.

 const element = {

      type: 'h1',

      props:{

           className: 'greeting',

           children: 'Hello, world!'

      }

 }

리액트는 이 객체들을 읽어 들여,

돔을 항상 최신으로 유지한다.

 

createElement의 parameter

 const element = {

      type,                 // 엘리먼트의 유형 (div, span과 같은 html 태그가 들어갈수 있고, 다른 리액트 컴포넌트가 들어올 수 있다. )

      [props],            // 속성들이 들어가는 것  

      [...children]      // 현재 엘리먼트가 포함하고 있는 자식 엘리먼트 
 }

 

 

리액트에서 JSX룰 쓰는것이 필수는 아니다.

createElement 함수를 통해서 만들 수 있기 때문.

허나 JSX를 사용하면 코드가 간결하고 생산성과 가독성이 올라가기 때문에 사용을 권장한다.

 

# JSX의 장점

 // JSX 사용함

 <div>Hello, {name}</div>

 // JSX 사용 안함

 React.createElement('div', null, `Hello, ${name}`)

 

- JSX로 작성할때 더 빨리 코드가 와닿는걸 깨닳을 수 있고,

  유지보수 관점에서 굉장히 중요한 요소 이다.

  (가독성이 높을수록 버그를 발견하기 쉽다.)

 

- Injection Attacks 라는 해킹 방어를 하기 때문에 보안성이 올라간다.

  ( Injection Attacks? 입력창에 문자나 숫자 같은 일반적인 값 아닌 소스코드를 입력하여 해당 코드가 실행되여 해킹하는 것 )

  ( 예를 들어 로그인 입력란에 JavaScript 코드를 입력했는데 바로 실행되버리면 위험.! )

 const title = response.potentiallMaliciousInput; // 잠재적으로 보안가능성이 있는 코드를 사용

 // 이 코드는 안전합니다.

 const element = <h1>{title}</h1>; // 괄호를 사용해서 title변수를 삽입, 임베딩 하고 있음

기본적으로 리액트돔은 랜더링 하기전에, 임베딩하는 값을 문자열로 변환한다.

명시적으로 선언되지 않은 값은 괄호사이에 들어갈 수 없다.

 

결과적으로 XSS 라는 크로스 사이트 어택을 막을수 있다.

 

 

# JSX 사용법

- 기본적으로 JavaScript 문법을 확장시킨것이기 때문에, 모든 자바스크립트 문법을 지원한다.

- JavaScript + XML/ HTML 로 사용할 수 있다. (섞어서 쓸 수 있다.)

예) 

... XML/ HTML

{ JavaScript 코드 }

... XML/ HTML

 

# 태그의 속성(attribute)에 값을 넣는 방법

 // 큰따옴표 사이에 문자열을 넣거나

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

 // 중괄호 사이에 자바스크립트 코드를 넣으면 됨~ 

 const element = <img src={userEvent.avatarUI}/>;

 

중괄호를 사용하면 무!적!권!

JavaScript코드가 들어간다 생각하면 됨

 

# 자식(children)을 정의하는 방법

 const element = (

      <div> // div의 children은 h1, h2!

           <h1>안녕하세요</h1>     

           <h2>잘먹고 잘살아 봅시다!</h2>

      </div>

 )

 

 

# 연습해보기

 

1. 생성해놓은 리액트 프로젝트 폴더에 들어가 샘플로 만들어볼 컴포넌트 폴더를 생성해 준다.

(이름은 마음대로 오퀘이!)

 

 

 

2. 만들어 놓은 폴더에 JSX파일을 만들고 내용을 작성한다.

필자는 임시로 Book.jsx폴더를 만들어줌

 

 

3. 좀전에 만든 Book.js파일과 같은 선상에 Library 파일도 만들어 주고 내용을 작성해준다.

 

 

 

4. index.js 파일에 생성한 Library파일을 import 해주고, render영역에 한번더 호출해 준다.

 

 

 

5. npm start를 터미널에서 돌려 로컬서버로 호출된 창을 확인하면 끝!

 

 

 

6. 번외로 jsx를 사용하지 않고 호출하는 방법도 작성했음.

확실히 코드가 길어짐..