[React] 짧고 간결한 코드를 만들 때 사용하기 좋은 JSX

👨‍🎓 JSX

• React를 사용하여 개발할 때 거의 필수적으로 사용
• A syntax extension to javaScript
• 자바스크립트의 확장 문법
• JavaScript + XML/HTML을 결합한 것

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)
);

• React는 객체들을 읽어서 DOM을 만드는 데 사용하고 항상 최신 상태 유지
• React에서는 이러한 객체를 element라고 부름
• createElement 함수의 파라미터를 나타낸 것

React.createElement(
	type,
    [props],
    [...children]
)

• type는 element의 유형 또는 타입을 나타냄
• type에는 div, span 같은 html태그가 오거나 다른 React component가 들어갈 수 있음
• props는 속성들이 들어감
• children는 현재 element가 포함하고 있는 자식 element
• 리액트에서 꼭 JSX를 사용하여 개발해야 하는 것이 아닌 createElement 함수를 사용하여 개발하면 됨

👨‍🎓 JSX 장점

• 가독성이 높으며 간결하고 직관적으로 코드를 작성할 수 있게 해주는 

// JSX 사용함

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

// JSX 사용 안함

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

• 간결한 코드
  • JSX를 사용한 코드의 경우 HTML의 div 태그를 사용하여 name이라는 변수가 들어간 인사말 표현
  • JSX를 사용하지 않은 코드의 경우는 createElement 함수를 사용하여 동일한 작업을 수행
• 가독성 향상
  • JSX를 사용한 코드가 그렇지 않은 코드에 비해 코드의 의미가 훨씬 더 빠르게 와닿는 것을 알 수 있음
  • 가독성은 코드 작성할 때 분만 아니라 유지 보수 관점에서도 중요한 부분
  • 가독성이 높을수록 코드 상에 존재하는 버그 또한 쉽게 발견 가능
• Injection Attacks 해킹 방어
  • 보안성이 올라감
  • 인젝션 어택은 입력창에 문자나 숫자 같은 일반적인 값이 아닌 소스 코드를 입력하여 해당 코드가 실행하도록 만드는 해킹 방법
  • title이라는 변수에 잠재적으로 보안 위험 가능성이 있는 코드가 삽입됨
  • JSX 코드에서는 괄호를 사용하여 title 변수에 삽입, 임베딩하고 있음
  • React DOM은 렌더링하기 전에 임베딩한 값을 모두 문자열로 변환
  • 명시적으로 선언되지 않은 값은 괄호 사이에 들어갈 수 없음
  • XSS라 불리는 크로스 사이드 스크립팅 어택을 방어할 수 있음
  • JSX를 사용하면 잠재적인 보안 위험을 줄일 수 있음

const title = response.potentiallyMaliciousInput;

// 이 코드는 안전합니다
const element = >h1>{title}</h1>;

👨‍🎓 JSX 사용법

• 모든 자바스크립트 문법을 지원하고 추가로 XML과 HTML을 섞어서 사용하면 됨

const name = '도희';
const element = <h1>안녕, {name}</h1>

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

• element를 선언하는 부분의 코드처럼 HTML과 자바스크립트가 섞인 형태로 코드를 작성
• XML/HTML 코드를 사용하다가 중간에 JS 코드를 사용하고 싶으면 중괄호로 묶어주면 됨

👨‍🎓 태그의 속성에 값을 넣는 방법

// 큰따옴표 사이에 문자열을 넣거나
const element = <div tabIndex="0"></div>;

//중괄호 사이에 자바스크립트 코드를 넣으면 됨!
const element = <img src={user.avatarUrl}></img>;

• JSX에서는 중괄호를 사용하면 무조건 자바스크립트 코드가 들어간다라고 외우면 됨

👨‍🎓 자식을 정의하는 방법

const element = (
	<div>
    	<h1>안녕하세요>/h1>
        <h2>열심히 리액트를 공부해 봅시다!</h2>
    </div>
);

• 상위 태그가 하위 태그를 둘러싸도록 하면 자연스럽게 자식이 정의됨

👨‍🎓 실습 - JSX 코드 작성

• JSX를 사용하면 가독성이 높고 직관적인 코드 작성 가능

• 완벽히 작성하였는데 결과가 제대로 나오지 않아 수정 중에 있습니다