[React] 리액트 사용자 정의 함수형 컴포넌트(Functional Component) - 클래스와 객체 인스턴스를 사용해 데이터 관리

🏷️ 요약

이 애플리케이션은 리액트를 사용하여 책 정보를 화면에 표시하는 기능을 구현하고 있습니다.

각 컴포넌트는 리액트의 함수형 컴포넌트로 정의되어 있으며,

책 객체는 클래스를 사용해 생성되었습니다.

 

• 'App' 컴포넌트는 책 목록을 관리하고 'Library' 컴포넌트에 전달합니다.
• 'Library' 컴포넌트는 책 목록을 반복하여 'BookShow' 컴포넌트를 통해 표시합니다.
• 'BookShow' 컴포넌트는 개별 책의 정보를 화면에 렌더링합니다.

---

🧱 사용자 정의 - 함수형 컴포넌트

App, Library, BookShow는 모두 리액트의 함수형 컴포넌트입니다.

이 컴포넌트들은 UI를 구성하는 역할을 합니다.

 

✴️ 클래스와 new 키워드 사용

Book 클래스는 책의 데이터 정보를 정의하고, new 키워드를 사용해 책 객체를 생성합니다.
생성된 책 객체들은 App 컴포넌트에서 Library 컴포넌트로 전달되어 UI에 표시됩니다.

---

🗂️ components

└ 📜 main.tsx

└ 📜 app.tsx

└ 📜 library.tsx

└ 📜 book.tsx

📜 index.html

---

📜 main.tsx

 

🔎 역할

• 애플리케이션의 진입점(entry point)

✅ 주요 작업

● ReactDOM.createRoot를 사용하여 애플리케이션을 렌더링할 루트 DOM 노드를 선택합니다.
● App 컴포넌트를 루트 DOM 노드에 렌더링합니다.

import React from 'react';
import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.querySelector("#reactRoot") as HTMLElement);

import App from './app';

root.render(
    <App/>
);

---

📜 app.tsx

 

🔎 역할

• 애플리케이션의 주요 컴포넌트를 정의

✅ 주요 작업

● Book 클래스를 정의하여 책의 제목과 가격을 저장하는 객체를 생성합니다.
● books 배열을 생성하여 여러 Book 객체를 저장합니다.
● Library 컴포넌트를 두 번 렌더링합니다:
   - 첫 번째는 모든 책을 표시하고,
   - 두 번째는 가격이 9,000원 이하인 책들만 파란색 배경으로 표시합니다.

import React from 'react';
import BookShow from './book';
import Library from './library';

class Book {
    title: string;
    price: number;

    constructor(title:string, price:number){
        this.title = title;
        this.price = price;
    }
}
export { Book };

export default function():JSX.Element {
    const books: Book[] = [
        new Book("어린왕자", 5000),
        new Book("종이여자", 7500),
        new Book("다빈치 코드", 12000),
        new Book("나미야 잡화점의 기적", 8000),
        new Book("용의자 X의 헌신", 9000),
    ];

    // <BookShow book={books[0]}/>
    return <>
        <Library books={books}/>
        <Library books={books.filter(v=>v.price <= 9000)} color="blue"/>
    </>
}

 

➕ 리액트(React)에서 return 문을 사용하는 방법

방식	설명
return 뒤에 괄호 사용	예전에는 return 뒤에 JSX 코드를 쓸 때  괄호() 를 자주 사용했습니다.
★ 줄바꿈 없이 JSX 코드 작성	최신 스타일 (괄호 없이) 지금은 괄호를 생략하고  바로 JSX 코드를 쓰는 것이 더 일반적입니다.  return 뒤에 바로 JSX 코드를 작성할 때는  줄 바꿈 없이 작성해야 합니다.  그렇지 않으면 JavaScript가  return 문에서 함수를 종료하는 것으로 인식하고,  실제로 JSX 코드를 반환하지 않게 됩니다.

 

---

📜 library.tsx

 

🔎 역할

• 책 목록을 표시하는 컴포넌트를 정의

✅ 주요 작업

● props.books를 사용하여 책 배열을 받아와 각 책을 BookShow 컴포넌트를 통해 표시합니다.
● color prop이 있으면, 해당 색상으로 배경을 설정합니다.

import React from 'react';

import { Book } from './app';
import BookShow from './book';

interface Props{
    books: Book[];
    color?:string;
}

export default function(props:Props):JSX.Element{
    return <>
        {
            props.books.map(v=><BookShow book={v} color={props.color}/>)
        }
    </>
}

---

📜 book.tsx

 

🔎 역할

• 개별 책 정보를 표시하는 컴포넌트를 정의

✅ 주요 작업

● props.book을 사용하여 책의 제목과 가격을 표시합니다.
● color prop이 있으면, 해당 색상으로 배경을 설정하고, 기본값으로 빨간색을 사용합니다.

import React from 'react';
import { Book } from './app';

interface Props{
    book: Book;
    color?:string;
}

export default function(props:Props):JSX.Element{
    return <div style={{
        backgroundColor: props.color ? props.color : "red",
        width:"200px",
        height:"60px"
    }}>
        <div>{props.book.title}</div>
        <div>{props.book.price}원</div>
    </div>
}

 

---