리액트JSX

JSX

• A syntax extension to Javascript (자바스크립트 확장 문법)

• Javascript + XML / HTML

const element = <h1>Hello, wordl!</h1>;

 

 

역할

• JSX는 내부적으로 XML/HTML 코드를 자바스크립트로 변환함.

• createElement 함수 : JSX 코드를 자바스크립트 코드로 변환하는 역할

// JSX를 사용한 코드
const element = (
<h1 className=""greeting">
Hello, world!
</h1>;
)



// JSX를 사용하지 않은 코드
const element = React.createElement(
'h1',
{ className: 'greeting' },
'Hello, world!'
)

 

 

 

• React.createElement()의 결과로 자바스크립트 객체(엘리먼트)가 생성됨

React.createElement(
type,
[props],
[...children]
)

 

① type - 엘리먼트의 유형 ,<div> <span>같은 HTML 태그나 다른 리액트 컴포넌트

② props – 엘리먼트의 속성. class, style, src 및 onclick 등의 태그 속성

③ children - 현재 엘리먼트가 포함하는 자식 엘리먼트

 

 

JSX 사용 여부에 따른 코드 비교 

// JSX 사용함
<div>Hello, {name}</div>
// JSX 사용 안함
React.createElement('div', null, `Hello, ${name}`);

 

장점

-코드 간결해짐

-가독성 향상

-보안성 향상: 입력창에 문자나 숫자 같은 소스코드를 입력해, 코드가 실행되도록 만드는 injection Attack해킹 방법을 방어 가능해짐( ex) ID 입력 창에 자바스크립트 코드 )

 

 

ReactDOM은 렌더링하기 전에 임베딩(삽입)된 값을 모두 문자열로 변환

const title = response.pontentiallyMaliciousInput;

//이 코드는 안전
const element = <h1>{title}</h1>;

 

• 위 예시 코드는 JSX 코드에서 중괄호를 사용해서 title 변수를 삽입하며, 이는 보안 위험이 발생할 수 있는 코드의 삽입 가능성이 있음

. • XSS(Cross-site-scripting) 공격을 방어할 수 있음

 

 

 

중괄호를 이용한 변수 참조

const name = "hh";
const element = <h1>Hello, {name}</h1>;
ReactDOM.render (
element,
document.getElementById('root’)
);

 

 

중괄호를 이용한 함수 호출

function formatterName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Hyunwoo',
lastName: 'Nam'
}
const element = (
<h1>
Hello, { formatterName(user) }
</h1>
);
ReactDOM.render (
element, document.getElementById('root')
);

 

태그의 속성에 값을 넣는 방법

 

• 큰따옴표 사이에 문자열을 넣는 방식

const element = <div tabIndex="0"></div>;

 

 

• 중괄호 사이에 자바스크립트 코드를 넣는 방식

const element = <img src={user.avatarUrl}></img>;

 

 

자식(children)을 정의하는 방법

• 평소 HTML 코드와 같이 상위 태그가 하위 태그를 둘러싸도록 작성하면 됨.

const element = (
<div>
<h1>안녕하세요.</h1>
<h2>반갑습니다.</h2>
</div>
);

 

 

 

실습

-저번에 만들어둔 파일))

 

-src안에 components폴더 생성

-components폴더 안에 Book.jsx, Library.jsx파일 생성

 

Book.jsx

import React from "react"; //리액트 라이브러리 가져오기, ui를 구축하는데 사용용

function Book(props){//Book 이라는 함수 + 컴포넌트 정의(props는 부모 컴포넌트에서 전달된데이터 포함)
    return(//jsx를 반환하기 시작, jsx는 js와 html결합한 문법법
        <div>
        <h1>{`이 책의 이름은 ${props.name}입니다.`}</h1>
        <h2>{`이 책은 총 ${props.numOfPage}페이지로 이루어져 있습니다.`}</h2>
        </div>
    );
}
export default Book;//이 컴포넌트를 다른 파일에서 사용할 수 있도록 내보냄냄

 

 

 

Library.jsx

import React from "react";//react 라이브러리 가져옴
import Book from "./Book";//Book컴포넌트를 현재 파일로 가져옴

function Library(props) {
    return(
        <div>
            <Book name="처음 만난 파이썬" numOfPage={300} />
            <Book name="처음 만난 AWS" numOfPage = {400} />
            <Book name ="처음 만난 리액트" numOfPage={500} />

        </div>
    );
}

export default Library;

 

 

index.js수정

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

import Library from './components/Library' //Library컴포넌트 불러오기기
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Library /> //이 부분도 불러올 컴포넌트인 Library로 변경경
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

 

컴포넌트 구조

 

 

 

• 엘리먼트(Element)란?
  • "요소" 또는 "성분"을 의미하며, 리액트 앱을 구성하는 가장 작은 단위.
  • 기존 웹에서 사용하던 DOM 엘리먼트 개념과 유사.
• 리액트 엘리먼트의 역할
  • 화면에 보이는 UI를 기술하는 자바스크립트 객체.
  • 실제로 웹 브라우저에서 렌더링될 DOM 엘리먼트를 생성하는 기반이 됨.
• 엘리먼트와 DOM의 관계
  • 리액트 엘리먼트: 화면에 어떤 UI가 나타날지 정의하는 객체.
  • DOM 엘리먼트: 리액트 엘리먼트의 정보를 바탕으로 실제 브라우저에서 렌더링되는 요소.
• 왜 ‘엘리먼트’라고 부를까?
  • 리액트 초기에는 이를 **Descriptor(설명자)**라고 불렀음.
  • 하지만 결국 DOM 엘리먼트를 나타내므로, 개념적 통일성을 위해 **엘리먼트(Element)**라는 용어를 사용하게 됨.

l const element = <h1>Hello, world!</h1>;

• 리액트의 createElement( ) 함수에 의해 리액트 엘리먼트가 생성됨

 

 

 

엘리먼트의 형태

• 리액트 엘리먼트는 자바스크립트 객체 형태로 존재

• 컴포넌트 유형, 속성, 자식(children)에 대한 정보를 포함하는 자바스크립트 객체

 

 

리액트 엘리먼트

{
	type: 'button',
    props: {
    	className: 'bg-green',
        children: {
        	type:'b',
            props: {
            	children: 'Hello, element!'
                }
            }
        }
}

 

 

DOM엘리먼트

<button class = 'bg-green'>
	<b>
    	Hello, element!
    <b>
 </button>

 

 

 

createElement( ) 함수

• 함수의 실행 결과로 자바스크립트 객체(엘리먼트)가 생성됨

React.createElement(
type,
[props],
[...children]
)

① type - 엘리먼트의 유형 ,<div> <span>같은 HTML 태그나 다른 리액트 컴포넌트

② props – 엘리먼트의 속성. class, style, src 및 onclick 등의 태그 속성

③ children - 현재 엘리먼트가 포함하는 자식 엘리먼트

 

 

 

• createElement( ) 함수의 동작 과정

• Buttton 컴포넌트를 포함하는 ConfirmDialog 컴포넌트 구성

function Button(props){
	return(
    	<button className = { `bg-${props.color}`}>
        	<b>
            	{props.children}
            </b>
        </button>
     )
 }
 
 
 function ConfirmDialog(props) {
 	return(
    	<div>
        	<p>내용을 확인하셨으면 확인 버튼을 눌러주세요.</p>
            <Button color = 'green'>확인</button>
        </div>
        )
 }

 

 

createElement( ) 함수의 동작 과정 – ConfirmDialog 컴포넌트

• 현 단계에서 Button 컴포넌트는 아직 HTML 태그가 아니기 때문에 DOM 렌더링이 안됨.

 

{
	type: 'div'
    props:{
    	children: [
        {
        	type: 'p',
            props: {
            	children: '내용을 확인하였으면 확인버튼을 눌러주세요.'
                }
             },
             {
             	type: Button,
                props: {
                	color: 'green',
                    children: '확인'
                    }
                }
           }
       ]
   }
}

 

 

 

• createElement( ) 함수의 동작 과정 – ConfirmDialog 컴포넌트 • 최종적으로 DOM에 렌더링되는 엘리먼트의 구성

{
	type: 'div'
    props:{
    	children: [
        {
        	type: 'p',
            props: {
            	children: '내용을 확인하였으면 확인버튼을 눌러주세요.'
                }
             },
             {
             	type: Button,
                props: {
               		className: 'bg-green',
                    children: {
                    	type: 'b',
                        props: {
                        	children:'확인'
                         }
                    }
                }
           }
       ]
   }
}

 

 

 

• Root DOM node

• root라는 id를 가진 div 태그에 모든 리액트 엘리먼트들이 렌더링되며, 리액트 DOM에 의해 관리됨.

• 리액트만으로 만들어진 앱은 단 하나의 Root DOM Node를 가짐

 

Root DOM node 엘리먼트 렌더링

const element = <h1>안녕, 리액트!<h1>;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

 

• createRoot로 설정된 Root DOM Node에 render 함수를 사용하여 화면을 렌더링 함.

• 엘리먼트가 렌더링되는 과정은 Virtual DOM에서 실제 DOM으로 이동하는 과정

• 렌더링된 엘리먼트 업데이트

• 엘리먼트는 한번 생성되면 바꿀 수 없기 때문에 다시 생성해야 함

• 즉 기존 엘리먼트를 변경하는 것이 아니라 새로운 엘리먼트를 생성해서 바꿔치기 방식으로 새로운 화면으로 업데이트 할 수 있음.

 

 

 

 

 

실습: 시계 만들기

 

-1초마다 실행: setinterval()함수 사용

-시간 정보 추출

: new Date().toLocaleTimeString() 내장함수 사용

 

 

components폴더 안에 Clock.jsx파일 생성후 작성

import React from "react" //react라이브러리 가져옴

function Clock(props) {//Clock이라는 이름의 함수형 컴포넌트 정의
    return (
        <div>
            <h1>
                현재시간: {new Date().toLocaleDateString() }

            </h1>
        </div>
    )
}

export default Clock;//이 컴포넌트를 다른 파일에서 사용할 수 있도록 내보냄

 

 

index.js

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

//DOM의 'root'요소를 선택하여 react가 렌더링 할 루트 생성
const root = ReactDOM.createRoot(document.getElementById('root'));
//1초 간격으로 Clock 컴포넌트 렌더링
setInterval(() => {
  root.render(
    <React.StrictMode>
      <Clock />
      </React.StrictMode>
  );
}, 1000);//1초 후에 컴포넌트 갱신


// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();