리액트 핵심만 훑어보자 #3 JSX 문법

 

📘  『소플의 처음 만난 리액트』를 읽고 정리한 글입니다.

 

JSX를 알아볼까?

const element = <h1>Hello, world! {name}</h1>;

• JSX는 Javascript and XML를 의미한다.
• 자바스크립트를 확장한 문법으로, 상기 코드와 같이 자바스크립트와 XML, HTML을 합친 것이라고 보면 된다.
• 여기서 한 가지 기억해야 할 부분은 JSX 문법을 사용하면 컴포넌트 내부에서 createElement() 메소드로 대체된다는 점이다.

 

// JS
const element1 = React.createElement('h1', {className: 'greeting'}, 'Hello, world! ${name}'});

// JSX
const element2 = <h1 className="greeting">Hello, world! {name}</h1>;

/*
element = {
	type: 'h1',
    props: {
    	className: 'greeting'
        children: 'Hello, world!'
    }
}
*/
console.log(element1);

• 가령 상기 코드의 element1과 element2를 콘솔에 출력하면 같은 결과가 나온다.
• 그런데 사실은 React.createElement() 함수를 바로 사용해도 되기 때문에 JSX 코드가 필수는 아니다.
• 참고로 JSX에서는 중괄호를 사용하면 무조건 자바스크립트 코드가 들어간다고 할 수 있다.

 

필수가 아니면 JSX 왜 쓰는 거야?

• 가장 큰 이유는 코드가 간결해지므로 코드 가독성이 향상된다는 점이다. 코드 가독성의 중요성은 누구나 알고 있을 정도로 설명이 필요 없다.
• 또한 Injection Attack 해킹 공격을 방어함으로써 보안성이 올라간다.
• 리액트는 기본적으로 렌더링 하기 전에 임베딩된 값을 문자열로 변환하는 과정을 거친다.
• 그렇기 때문에 명시적으로 선언되지 않은 값은 괄호 사이에 들어갈 수 없다.
• 결과적으로 이것은 XSS라 불리는 Cross-site-scripting Attacks를 방어할 수 있다. 다음 코드를 보자.
  
  

const input = response.해킹자바스크립트코드;
const element = <h1>{input}</h1>;

• 가령 input에 자바스크립트 코드가 있다고 하더라도 문자열로 변환하기 때문에 해당 코드는 실행되지 않는다.

 

실습해 보자

import React from "react";

function Member(props) {
    return (
        <div>
            <h1>{`멤버의 이름은 ${props.name}입니다.`}</h1>
            <h2>{`총 ${props.numOfProject} 프로젝트를 진행하고 있습니다.`}</h2>
        </div>
    );
}

export default Member;

• 먼저 Member 컴포넌트를 작성할 것이다.
• 좌측 탐색기에 우클릭한 후 Member.jsx 파일을 생성하자.
• 문자열에 동적인 값을 임베딩 하려면 ${}로 감싼 후 백틱 ``으로 한번 더 감싸야한다.

 

import React from "react";
import Member from "./Member";

function Team(props) {
    return (
        <div>
            <Member name="김아무개" numOfProject={3}/>
            <Member name="박아무개" numOfProject={4}/>
            <Member name="윤아무개" numOfProject={5}/>
        </div>
    );
}

export default Team;

• 상기 코드처럼 Member 컴포넌트를 사용할 Team 컴포넌트를 작성하자.
• 이번에도 좌측 탐색기에 우클릭한 후 Team.jsx 파일을 생성하면 된다.
• 참고로 Member, Team는 책과 관계 없이 작성자가 아무 이유 없이 정한 컴포넌트명이므로 만들고 싶은 컴포넌트와 속성을 지정하면 된다.

 

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';

import Team from './component/Team';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Team />
  </React.StrictMode>
);

reportWebVitals();

• 마지막으로 index.js에 작성한 컴포넌트를 적용하면 된다.
• "<Team />" 코드를 작성하면 import는 VS Code가 알아서 해준다. 

 

실행해 볼까?

• 참고로 리액트 프로젝트 경로로 이동해서 "npm start" 명령어를 입력하면 프로젝트가 실행되면서 새창과 함께 화면을 확인할 수 있다.

 

마치며

책을 읽을 땐 쏙쏙 잘 이해되었는데 막상 토이 프로젝트에 적용하려니 '이걸 어떻게 적용하지?'라는 생각이 들었다.
아직 고민은 현재진행형이지만 이번 주말에 한번 시도해보려고 한다.

그래도 시작이 반이더라. 🤸‍♂️

이미지 출처

[React] Component 를 사용하는 기본적인 방법

소플 - soaple.io