React JSX 소개
JSX 소개
Hello world
먼저 글을 읽으며 실습을 하고싶은 사람은 react-create-app 을 보고오자.
<!-- HTML -->
<div id="root"></div>
//jsx
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
먼저 가장 기본이되는 Hello world 부터 화면에 출력해보자. HTML에서 div의 id값을 root로 주었다. jsx에서 getElementById로 id가 root인 태그를 찾아 h1 태그를 넣어 랜더링 시켜주고 있다.
여기서 JSX란 무엇일까?
const element = <h1>Hello, world!</h1>;
가 JSX이고, JavaScript를 확장한 문법이다. XML과 비슷하게 생겼으며, 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
const name = 'LEE HYUNHO';
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
위와 같이 JavaScript 변수를 선언하여 중괄호로 감싸 JSX 안에 사용할 수 있다.
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'LEE',
lastName: 'HYUNHO'
};
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
ReactDOM.render(
element,
document.getElementById('root')
);
중괄호 안에 함수를 넣을수도 있다. 결과는 Hello, LEE HYUNHO로 같다.
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'LEE',
lastName: 'HYUNHO'
};
const element = (
<h1>
{getGreeting(user)}
</h1>
);
ReactDOM.render(
element,
document.getElementById('root')
);
JSX도 표현식이다. JSX를 if, for 등 안에 사용하고 변수에 할당하고 인자로서 받아들이고 함수로 부터 반환할 수 있다. user가 없다면 위의 결과를 얻을 것이다.
-
JSX 속성
-
문자열 리터럴 정의
const element = <div id="root"></div>;
" 으로 정의한다. -
속성에 JS 표현식 삽입
const element = <img src={user.avatarUrl}></img>;
중괄호를 이용한다. -
camelCase
JSX는 HTML보다 JS에 가깝다. 그래서 HTML 속성 이름 대신 camelCase을 사용한다.
ex) class="btn" 이 아니라 className="btn" 사용
-
-
JSX 자식 정의
-
비어있는 태그
const element = <img src={user.avatarUrl} />;
XML처럼 비어있는 태그는 바로 닫아주자. -
자식
const element = ( <div> <h1>Hello!</h1> <h2>Good to see you here.</h2> </div> );
JSX 태그는 자식을 포함할 수 있다.
-
- XSS 공격 방지
React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 escape 한다. 또한, 모든 항목은 문자열로 변환하기 때문에, 애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않는다. (무슨 의미인지 잘 모르겠다..)const title = response.potentiallyMaliciousInput; // 이것은 안전합니다. const element = <h1>{title}</h1>;
-
JSX는 객체를 표현
const element = ( <h1 className="greeting"> Hello, world! </h1> );
const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' );
이 두 예시는 같다. Babel은 JSX를
react.createElement()
호출로 컴파일한다.const element = { type: 'h1', props: { className: 'greeting', children: 'Hello, world!' } };
이와같은 객체를 생성하게 되는 것이다. ( = React 엘리먼트)
React는 이 객체를 읽어 DOM을 구성하고 최신 상태로 유지하는데 사용한다.
마무리
JSX > React.Element > Virtual DOM > ReactDOM 랜더링
Author And Source
이 문제에 관하여(React JSX 소개), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@leehyunho2001/React-JSX-소개저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)