React - JS / TS

이동언·2024년 9월 21일

JavaScript React tailwind typescript

new world

목록 보기

46/62

9.21 (금)

1. TailWind CSS

👉 style태그를 이용하여 별도의 css를 사용하지 않고, java태그 내부에 css를 사용할 수 있음.

ex)

<h1 className="h1 bg-red-400"> hello </h1>

📌 https://tailwindcss.com/docs/guides/vite

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
tailwind.config 내부의 content에 해당내용 수정

content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],

index.css내부에 기존내용 모두 지우고 해당내용 복사

@tailwind base;
@tailwind components;
@tailwind utilities;

App.jsx 의 return값의 내용을 수정하여 확인해보기

2. React - JS

2-1. KioskMain.jsx

import CartDiv from "./CartDiv.jsx";
import ProductsList from "./ProductsList.jsx";
import {useState} from "react";

function KioskMain() {

    const products = [
        {pid:1, pname:'M1', price:8000, kind:'N', img:'http://localhost:8081/food/M1.jpeg'},
        {pid:2, pname:'M2', price:1000, kind:'C', img:'http://localhost:8081/food/M2.jpeg'},
        {pid:3, pname:'M3', price:2000, kind:'N', img:'http://localhost:8081/food/M3.jpeg'},
        {pid:4, pname:'M4', price:3000, kind:'C', img:'http://localhost:8081/food/M4.jpeg'},
        {pid:5, pname:'M5', price:4000, kind:'N', img:'http://localhost:8081/food/M5.jpeg'},
    ]

    // cartItems - 카트 내부상태, setCartItems - 카트에 담겼을때 다음 상태
    const [cartItems, setCartItems] = useState([])

    // Cart에 담는 기능
    const addToCart = (newProduct) => { // newProduct = 새로 추가되는 물품

        const target = cartItems.find( item => { // item = [{product{pid,pname,price,kind}, qty:1 }]
            const p = item.product
            console.log("item.product : " + p)

            const result = p.pid === newProduct.pid // 장바구니에 있는 product의 pid와 새로들어온 pid
            console.log("장바구니에 있는지? " + result)
            return result ? p : null
        })

        if(!target) {
            setCartItems([...cartItems, {product: newProduct, qty: 1}]) // 기존카트값에 새로들어온 물품을 추가, 수량정의
            return
        }

        target.qty += 1 // 장바구니에 있다면, 수량만 변경
        setCartItems([...cartItems]) // 객체 새로생성


    }

    const changeCartItem = (pid, amount) => {

        const target = cartItems.find( item => item.product.pid === parseInt(pid))  // item = [{product{pid,pname,price,kind}, qty:1 }]

        if(!target) {
            return
        }

        target.qty += amount

        if(target.qty <= 0) {
            const filtered = cartItems.filter(item => item.product.pid !== parseInt(pid))
            // 내가 선택하지 않은 pid값만 남기기
            setCartItems(filtered)
            return
        }

        setCartItems([...cartItems])
    }

    return (
        <div className="w-full flex">
            <div className='border-2 w-2/3 bg-blue-400'>
                <ProductsList products={products} addToCart={addToCart}></ProductsList>
            </div>

            <div className='border-2 w-1/3 bg-red-400'>
                <CartDiv cartItems={cartItems} changeCartItem={changeCartItem} ></CartDiv>
            </div>
        </div>
    );
}

export default KioskMain;

👉 KioskMain에서는 products, cartItems, setCartItems, addToCart, ChangeCartItem을 정의하여 CartDiv, ProductsList 각각의 컴포넌트에 부여한다.

👉 products는 물품과 가격이 출력되어야하고, addToCart는 물품이 담겨야하는 기능이므로 ProductList에 부여한다.

👉 cartItems는 카트에 담긴 상태를 보여주고, ChangeCartItem은 장바구니에서 수량을 변경해야하므로 CartDiv에 부여한다.

2-2. ProductsList.jsx


function ProductsList({products,addToCart}) {

    const liList = products.map( p => { // 여기서 p값은 product(각 상품들을 뜻함. 1번상품 , 2번상품을 순회)
        const {pid, pname, price, kind, img} = p

        return <li className="w-1/6 border-2 h-1/6 min-h-[10rem]" key={pid} onClick={() => addToCart(p)}>
            <img src={img}/>
            {pname} -- {price}
               </li>
    })


    return (
        <div>
            <h1>Products List</h1>
            <div className='w-full h-full'>
            <ul className='flex gap-2 flex-auto p-6'>
                {liList}
            </ul>
            </div>
        </div>
    );
}

export default ProductsList;

👉 Main에서 부여받은 products,addToCart 두개의 기능을 부여하고, products에서 각각의 상품(m1,m2,m3...)이 있을텐데, 그 상품의 속성값을 출력하기 위함.

👉 addToCart에서는 선택한 상품의 구조분해할당된 값을 넣는다.

2-3. CartDiv.jsx

function CartDiv({cartItems, changeCartItem}) {

    const cartItemsTag = cartItems.map((item) => { // item = {product{pid,pname,price,kind}, qty}

        const product = item.product;
        const qty = item.qty;

        return (
            <li key={product.pid} className='m-2 p-2'>
                {product.name}: {qty} : {product.price * qty}
                <button className='bg-blue-400 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded'
                        onClick={() => changeCartItem(product.pid, 1)}>+
                </button>

                <button className='bg-red-400 hover:bg-red-700 text-white font-bold py-2 px-4 rounded'
                        onClick={() => changeCartItem(product.pid, -1)}>-
                </button>
            </li>
        )
    })

    return (
        <div>
            <h1>Cart Div</h1>
            <div className='w-full h-full'>
                {cartItemsTag}
            </div>
        </div>
    );
}

export default CartDiv;

👉 main에서 받은 cartItems를 통해 카트에 담긴 물품들을 출력한다.
여기서 item값은 item = {product{pid,pname,price,kind}, qty} 임을 생각하자.

👉 버튼을 클릭했을때, CartItems내부의 product내부 pid속성값과, amount인 1값이 전달되어 수량이 변경된다.

3. React - TS

3-1. kiosk.ts

export interface IProduct {
    pid : number;
    pname : string;
    price : number;
    img? : string;
    kind? : string;
}

export interface ICartItem {
    product : IProduct, // product는 IProduct의 속성값들을 가지므로 해당 데이터타입을 갖게된다.
    qty : number
}

👉 typeScript는 type 패키지를 따로 생성해서 속성값과 데이터타입을 미리 구조한다.

👉 여기서 img? 와 같은 ?는 있을수도있고 없을수도있다는 의미

3-2. KioskMain.tsx

import ProductList from "./ProductList.tsx";
import CartDiv from "./CartDiv.tsx";
import {ICartItem, IProduct} from "../../type/kiosk.ts";
import {useState} from "react";


function KioskMain() {

    const products : IProduct = [
        {pid:1, pname:'M1', price:3000, img:'http://localhost:8081/food/M1.jpeg'},
        {pid:2, pname:'M2', price:4000, img:'http://localhost:8081/food/M2.jpeg'},
        {pid:3, pname:'M3', price:5000, img:'http://localhost:8081/food/M3.jpeg'},
        {pid:4, pname:'M4', price:6000, img:'http://localhost:8081/food/M4.jpeg'},
        {pid:5, pname:'M5', price:7000, img:'http://localhost:8081/food/M5.jpeg'},
    ]

    const [ cartItems, setCartItems ] = useState<ICartItem[]>([]) // cartItems는 ICartItem[]의 타입을 가진다.

    const addToCart = (newProduct: IProduct):void => { // 특정한 값을 반환하는것이 아니므로 void

        const target: ICartItem|undefined = cartItems.find( item => item.product.pid === newProduct.pid)
        // find에 만족하는 값이 없다면 undefined를 반환 -> 선택한 물건이 장바구니에 없다면
        if(!target) {
            setCartItems([...cartItems,  {product:newProduct, qty:1}])
            return;
        }
        else{
            target.qty += 1
            setCartItems([...cartItems])
        }
    }

    const changeQty = (pid:number, qty:number):void => {

        const target: ICartItem|undefined = cartItems.find( item => item.product.pid === pid)

        if(!target) {
            return;
        } else {
            target.qty += qty
            setCartItems([...cartItems])
        }
    }


    return (
        <div className='w-full h-full p-3 flex'>

            <div className='w-2/3 bg-blue-400 m-2 p-2'>
                <h1 className='p-2 font-bold' >Product List</h1>
                <ProductList products={products} addToCart={addToCart}></ProductList>
            </div>


            <div className='w-1/3 bg-red-400 m-2 p-2'>
                <h1 className='p-2 font-bold'>Cart List</h1>
                <CartDiv cartItems={cartItems} changeQty={changeQty}></CartDiv>
            </div>
        </div>
    );
}

export default KioskMain;

👉 cartItems와 같은 카트 내부의 상태 데이터는 ICartItem[] 의 데이터타입을 가진다.

👉 addCart에서 새롭게 담기는 product의 타입은 IProduct의 타입이므로 미리 선언하고, target이 있다면 ICartItem의 타입을 갖게 되고, 없다면 undefined 타입을 갖는다.

3-3. ProductList.tsx

import {IProduct} from "../../type/kiosk.ts";
import {ReactElement} from "react";

interface ProductListProps {
    products : IProduct[];
    addToCart : (newProduct: IProduct) => void;
}


function ProductList({products, addToCart} : ProductListProps): ReactElement {

    console.log(products);

    const productLI = products.map((product: IProduct) => {
        const {pid, pname, price, img} = product;

        return (
            <li className='border-2 w-1/5' key={pid} onClick={() => addToCart(product)}>
                {img && <img src={img} alt={pname}/>}
                {pname} -- {price}
            </li>
        )
    })


    return (
        <div>
            <ul className='flex flex-wrap'>
                {productLI}
            </ul>

        </div>
    );
}

export default ProductList;

👉 js와 다르게 ts에서는 부여받은 객체 및 메서드는 direct로 사용하지 않고, interface로 상위에 정의한다음 아래에서 사용하게 된다. 아래에서는 ({products, addToCart} : ProductListProps) 이처럼 부여받은 내용들을 작성하고, ReactElement는 React 컴포넌트로서 유효한 React 엘리먼트를 반환해야 한다는 것을 의미한다.

👉 아래코드는 img가 있을경우 img를 출력한다는 의미

 {img && <img src={img} alt={pname}/>}

3-4. CartDiv.tsx

import {ICartItem, IProduct} from "../../type/kiosk.ts";
import {ReactElement} from "react";

interface CartListProps{
    cartItems : ICartItem[]
    changeQty : (pid: number, qty: number) => void;
}

function CartDiv({cartItems, changeQty}: CartListProps ):ReactElement {

    console.log(cartItems)

    const listLI = cartItems.map((item: ICartItem) => {
        const {product, qty} = item
        return <li key={product.pid} className='flex flex-wrap border-2 gap-3'>
            {product.img && <img className='w-1/6' src={product.img}/>}
            {product.pname} -- {qty} -- {product.price * qty}
            <button onClick={()=> changeQty(product.pid,1)}>+</button>
            <button onClick={()=>changeQty(product.pid,-1)}>-</button>
        </li>
    })

    return (
        <div>
            {listLI}
        </div>
    );
}

export default CartDiv;

👉 부여받은 객체와 메서드를 interface로 정의하고, changeQty는 매개변수값과 ,return값인 void를 작성한다.

interface CartListProps{
    cartItems : ICartItem[]
    changeQty : (pid: number, qty: number) => void;
}

👉 아래코드에서는 return값의 복잡함을 줄이기위해 listLI라는 변수값에 return값을 별도로 만들어 최종 return값에서는 listLI변수만 사용하도록 한다.

 const listLI = cartItems.map((item: ICartItem) => {
        const {product, qty} = item
        return <li key={product.pid} className='flex flex-wrap border-2 gap-3'>
            {product.img && <img className='w-1/6' src={product.img}/>}
            {product.pname} -- {qty} -- {product.price * qty}
            <button onClick={()=> changeQty(product.pid,1)}>+</button>
            <button onClick={()=>changeQty(product.pid,-1)}>-</button>
        </li>
    })

4. TypeScript의 장점

타입의 안정성 : JS와 달리 TS는 type컴포넌트내부의 interface가 있기 때문에, 제품과 장바구니의 구조를 명확하게 할 수 있다. 하여, 데이터타입의 구조에 대한 오류가 줄어든다.
addToCart에서의 데이터타입 명시, changeQty에서의 매개변수 명시하여 실수가 줄어듬
유니언타입 : const target: ICartItem|undefined 와 같은 코드를 사용하여 변수의 여러타입을 명시가능