소플의 처음 만난 리액트_실습1

소플의 처음 만난 리액트_실습1

 

국비교육 수료 후

희미해져가는 기억을 되살리기 위해

다시 한 번 기초를 탄탄히 다지는 시간을 가지기로 했다.

아는 내용이여도 말로 설명할 수 있을 때까지 공부하기!!!

---

리액트란?

사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 (=React.js)

SPA(Single Page Application)를 쉽고 빠르게 만들 수 있도록 해주는 도구

 

리액트의 장점

• 빠른 업데이트와 렌더링 속도
• 재사용성이 높은 컴포넌트 기반 구조
• 메타의 든든한 지원
• 활발한 지식 공유와 커뮤니티
• 리액트 네이티브를 통한 모바일 앱 개발 가능

리액트의 단점

• 방대한 학습량
• 높은 상태 관리 복잡도

JSX란?

자바스크립트와 XML/HTML을 함께 사용할 수 있는 자바스크립트의 확장 문법이다.

 

JSX의 역할

JSX로 작성된 코드는 모두 자바스크립트 코드로 변환한다.

리액트는 JSX 코드를 모두 createElement() 함수를 사용하는 코드로 변환한다.

 

JSX의 장점

코드가 간결해짐, 가독성 향상, Injection Attack을 방어함으로써 보안성이 올라감

→ 기본적으로 ReactDOM은 렌더링 전 임베딩된 값을 모두 문자열로 변환한다.

　 때문에 명시적으로 선언되지 않은 값은 들어갈 수 없다. 결과적으로 XSS(cross-site-scripting attacks)를 방어할 수 있다. 

 

JSX코드 실습 !!!

//Book.jsx

import React from "react";

function Book(props) {
    return (
        <div>
            <h1>{`이 책의 이름은 ${props.name}입니다.`}</h1>
            <h2>{`이 책은 총 ${props.numOfPage}페이지로 이뤄져 있습니다.`}</h2>
        </div>
    )
}
export default Book;

//Library.jsx

import React from "react";
import Book from "./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 Library from "./chapter_03/Library";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <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();

실행 결과