REACT | 처음 만난 리액트 - 3. JSX

2024. 8. 18. 16:20·STUDY/리액트

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
'STUDY/리액트' 카테고리의 다른 글
  • REACT | 처음 만난 리액트 - 5. Components and Props
  • REACT | 처음 만난 리액트 - 4. Rendering Elements
  • REACT | 처음 만난 리액트 - 1. 리액트 소개
  • REACT | 처음 만난 리액트 - 0. 준비하기
진미
진미
  • 진미
    ABC
    진미
  • 전체
    오늘
    어제
    • 분류 전체보기 (65)
      • PROJECT (3)
      • ALGORITHM (43)
      • STUDY (3)
        • 리액트 (7)
        • 파이썬 (2)
      • 기타 (5)
  • 블로그 메뉴

    • 홈
    • 방명록
    • 글쓰기
    • 설정
  • 인기 글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.0
진미
REACT | 처음 만난 리액트 - 3. JSX
상단으로

티스토리툴바