1. JSX 정의와 역할
JSX(A syntax extension to JavaScript) - 자바스크립트의 확장 문법
const element = <h1>example code</h1>
JSX의 역할
JSX는 내부적으로 XML, HTML 코드를 JavaScript로 변환하는 과정을 거침
jsx에 따라 코드를 작성해도 최종적으로는 JavaScript로 나옴
리액트에서는 createElement 함수가 이 역할을 수행함
React.createElement(
type, // 엘리먼트 유형, 타입 e.g. div, span
[props], // 속성
[...children] // 현재 엘리먼트가 포함한 자식 엘리먼트
)
JSX vs !JSX
### JSX를 사용한 코드
const element = (
<h1 className = "greeting">
Hello World
</h1>
)
### JSX를 사용하지 않은 코드
const element = React.createElemnt(
'h1',
{className: 'greeting'},
'Hellow Wolrd'
)
2. JSX의 장점 및 사용법
JSX 장점
1. 간결한 코드
### JSX 사용
<div>Hello {name}! </div>
### !JSX
React.createElement('div',null, 'Hello ${name}!');
2. 가독성 향상
3. Injection Attacks 방어
Injection Attack이란 입력창에 소스 코드를 입력하여 해당 코드가 실행되도록 만드는 공격 기법
const title = response.potentiallyMaliciousInput;
const element = <h1>{title}</h1>;
React DOM은 렌더링하기 전에 임베딩된 값을 모두 문자열로 변환함, 그렇기 때문에 XSS(크로스 사이트 스트립팅) 공격도 방어할 수 있음
JSX 사용법
JavaScipt + HTML/XMl
JSX에서는 중괄호를 사용하면 무조건 자바스크립트 코드가 들어간다고 생각하면 됨
// 태그의 속성에 값을 넣는 방법
const element = <div tabIndex="0"></div>;
const element = <img src={user.avatarURL}></img>;
// 자식(children)을 정의하는 방법
const element =(
<div>
<h1>안녕하세요</h1>
<h2>리액트 열심히 공부해야겠다.</h2>
</div>
)
리액트를 쓰면서 jsx를 당연하게 사용해와서 리액트에서 필수로 사용해야 하는 것인줄 알았다.
근데 아니었다니.. babo
반응형
'STUDY > 리액트' 카테고리의 다른 글
REACT | 처음 만난 리액트 - 6. State and Lifecycle (1) | 2024.08.24 |
---|---|
REACT | 처음 만난 리액트 - 5. Components and Props (0) | 2024.08.23 |
REACT | 처음 만난 리액트 - 4. Rendering Elements (1) | 2024.08.22 |
REACT | 처음 만난 리액트 - 1. 리액트 소개 (0) | 2024.08.13 |
REACT | 처음 만난 리액트 - 0. 준비하기 (0) | 2024.08.12 |