JSX 데이터 다루는 방법

react에서 jsx사용이 필수는 아니지만 시각적으로 더 도움이 되고 react에서 보내주는 에러 및 경고 메시지 서비스를 받을 수 있어 많이 사용합니다.

 

jsx는 JavaScript에 XML을 합쳐 구문을 확장한 표현식입니다. 컴파일 후 JSX 표현식은 일반 javascript함수 호출이 되고 javascript객체로 평가됩니다. 식은 값이 될 수 있기 때문에 if명령문과 for 루프 안에서 사용할 수 있고, 변수에 할당하고 함수의 인수로 받거나 반환할 수 있습니다.

 

* 인젝션 공격 예방

react Dom은 렌더링 되기 전에 jsx내에 포함된 모든 값을 문자열로 바꾸기 때문에 XSS(cross-site-scripting)공격을 막을 수 있습니다.

 

* innerHTML을 대체하는 dangerouslySetInnerHTML

ex) <div dangerouslySetInnerHTML={innerHTML()}></div>

1. 대소문자 구별

대문자로 시작하는 것은 리액트 컴포넌트를 불러오는 요소로 인식.

소문자로 시작하는 것은 일반 태그로 인식

2. 변수 연결

jsx안에서 { }를 사용하면 자바스크립트 코드로 인식합니다.

import React, { Component } from 'react';

class App extends Component {
	render() {
    	const name = 'react';
        return (
        	<p>안뇽! {name}</p>
        )
    }
}

export default App

render 함수 안에 모두 작성되었지만,

return 문 안에는 jsx만 있고, js code는 return문 밖에 있습니다.

3. 메서드 연결

class 안, render() 바깥에 메서드를 만들고 jsx문법에다가 {this.methodName}으로 넣으면 됩니다.

import React, { Component } from 'react';

class App extends Component {

	handleClick = () => {
    	console.log("clicked!!!");
    }
    
	render() {
    	const name = 'react';
        return (
        	<p onClick={this.handleClick}>안뇽! {name}</p>
        )
    }
}

export default App

4. jsx 내부에서 '문' 형식은 사용할 수 없다.

삼항연산자와 AND 연산자만 가능. 왜냐하면 jsx는 자바스크립트 표현식까지 포함하지, 문을 포함하지는 못합니다.

예를 들어 if문을 꼭 써야 한다면 IIFE(즉시실행함수) 방법으로 우회할 수 있습니다.

 

- 삼항연산자

(조건식) ? (참일 때 실행문) : (거짓일 때 실행문)

 

- AND 연산자 : 참일 때만 실행함.

(조건식) && (참일 때 실행문)

 

- OR 연산자 : 거짓일 때만 실행함.

(조건식) || (거짓일 때 실행문)

 

- IIFE

(function(){})()