출처 : 소플 처음 만난 리액트 (도서)
JSX
A syntax extension to JavaScript 즉, 자바스크립트의 확장 문법이라는 뜻을 가지고 있다.
어떻게 확장한 것이냐면,,,
JSX는 JavaScript XML/HTML을 합친 것이라고 보면 된다.
역할
JSX는 내부적으로 XML/HTML 코드를 자바스크립트로 변환하는 과정을 거치게 된다. JSX 코드를 작성해도 최종적으로는 자바스크립트의 코드가 나오게 되는 것이다.
이 때 createElement() 리액트 함수를 쓴다. (JSX 코드를 자바스크립트 코드로 변환하는 역할)
React.createElement()의 결과로 아래와 같은 객체가 생성된다.
createElement() 함수의 파라미터로는 어떤 것이 들어가는 자세히 보자.
우선 props은 속성정도라고 알아두자
children 파라미터는 현재 엘리먼트가 포함하고 있는 자식 엘리먼트라고 보면 된다.
장점
- 코드가 간결해지고 가독성이 좋다.
JSX 사용함
<div>Hello, {name}</div>JSX 사용 안 함
React.createElement('div', null, 'Hello, ${name});- Injection Attack이라 불리는 해킹 방법을 방어함으로써 보안성이 올라간다.
Injection Attack 은 쉽게 말해서 입력창에 문자나 숫자 같은 일반적인 값이 아닌 소스코드를 입력하여 해당 코드가 실행되도록 만드는 해킹 방법
const title = respons.potentiallyMaliciousInput;
// 이코드는 안전합니다.
const element = <h1>{title}</h1>;title이라는 변수에 잠재적으로 보안 위험의 가능성이 잇는 코드가 삽입되었다. 그리고 JSX 코드에서는 괄호를 사용해서 title 변수를 임베딩(embedding)삽입하고 있다.
JSX 사용법
cont name = '개발자';
cont element = <h1>안녕, {name}</h1>;
cont root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);HTML과 자바스크립트가 섞인 형태로 코드를 작성하면 된다. XML/HTML 코드를 사용하다가 중간에 자바스크립트 코드를 사용하고 싶으면 중괄호를 써서 묶어 주면 된다. {name}으로 표시된 부분이 바로 name 이라는 자바스크립트 변수를 참조하기 위해서 괄호를 사용한 것이다.
const element = (
<h1>
Hello, {formatName(user)}
</h1>
);
cont root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);JSX를 사용할 때 XML/HTML 코드 사이에 중괄호를 사용해서 자바스크릡트 변수나 함수를 사용한다.
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>
}위의 코드는 JSX를 사용해서 사용자 이름에 따라 다른 인사말을 표시하도록 만든 함수이다. 사용자가 존재하면 formatName() 이라는 함수를 써서 포매팅된 이름을 출력하고, 그렇지 않을경우 Stranger에게 하는 인사말이 출력된다.
HTML 태그 중간이 아닌 태그의 속성에 값을 넣고 싶을 때는 아래를 참고하자.
큰따옴표 사이에 문자열을 넣거나
const element = <div tabIndex="0">;중괄호 사이에 자바스크립트 코드르르 넣으면 됨
const element = <img src={user.avatarIrl}></img>
위처럼 큰 따옴표 사이에 문자열을 넣거나 중괄호 사이에 자바스크립트 코드를 넣으면 되며 아래 한줄을 기억하자
JSX에서는 중괄호를 사용하면 무조건 자바스크립트 코드가 들어간다.
JSX 코드 작성해보기
VS Code로 create-react-app을 이용하여 프로젝트를 연다. 그리고 src 아래에 폴더를 하나 생성한다. 그리고 그 폴더안에 jsx 파일을 생성한다.
위 jsx 파일에 Book이라는 이름의 리액트 함수 컴포넌트를 하나 만든다.
Book 컴포넌트는 props로 name과 numOfPage를 받아서 이를 출력하는 컴포넌트이다.
이제 Book 컴포넌트를 사용하는 상위 컴포넌트를 만들어보자.
Library.jsx 라는 이름의 파일을 만들고, 위 코드처럼 Library라는 이름의 리액트 함수 컴포넌트를 하나 만들었다.
Library 컴포넌트는 총 세 개의 Book 컴포넌트를 랜더링하고 있다. 실제 만든 컴포넌트를 화면에 랜더링하기 위해서 index.js 파일을 수정해야한다.
아마 확장프로램이 설치가 되어 있어서 컴포너늩를 가져오면 자동으로 import가 생성될 것이다. ReactDOM을 사용해 root DOM node에 랜더링하도록 코드를 수정한 것.
요렇게 localhost 창에 노출된다.
참고로 리액트 애플리케이션을 개발할 때에는 무조건 JSX를 사용한다고 생각하자!
