Colin's Blog
자바스크립트와 React.js로 구현한 쇼핑몰 장바구니 애플리케이션 제작 방법

이번 포스트에서는 자바스크립트와 React.js를 사용하여 쇼핑몰 장바구니 애플리케이션을 제작하는 방법을 알아보겠습니다. React.js는 웹 애플리케이션 개발에 많이 사용되는 자바스크립트 라이브러리로, UI 컴포넌트를 구성하고 상태 관리를 용이하게 해줍니다.

1. 프로젝트 설정

먼저, React.js 프로젝트를 생성하기 위해 Node.js와 npm을 설치해야 합니다. 설치가 완료되었다면, 다음 명령을 사용하여 새로운 React 프로젝트를 생성합니다.

npx create-react-app shopping-cart

프로젝트가 생성되면 해당 디렉토리로 이동하여 필요한 의존성을 설치합니다.

cd shopping-cart
npm install

2. 컴포넌트 구조 설계

애플리케이션의 기본적인 구조를 설계하기 위해 컴포넌트를 만들어 봅시다. 다음과 같은 컴포넌트를 생성합니다.

// src/App.js

import React, { Component } from 'react';
import ProductList from './ProductList';
import Cart from './Cart';

class App extends Component {
  render() {
    return (
      <div>
        <h1>쇼핑몰 장바구니 애플리케이션</h1>
        <ProductList />
        <Cart />
      </div>
    );
  }
}

export default App;

3. 상품 목록과 장바구니 구현

ProductList 컴포넌트에서는 상품 목록을 보여주고, 장바구니에 상품을 추가할 수 있도록 구현해야 합니다. Cart 컴포넌트에서는 장바구니에 담긴 상품들을 보여주고, 상품을 삭제할 수 있도록 구현합니다.

// src/ProductList.js

import React, { Component } from 'react';

class ProductList extends Component {
  state = {
    products: [
      { id: 1, name: '상품 1', price: 10000 },
      { id: 2, name: '상품 2', price: 20000 },
      { id: 3, name: '상품 3', price: 30000 },
    ],
    cart: [],
  };

  addToCart = (product) => {
    this.setState((prevState) => ({
      cart: [...prevState.cart, product],
    }));
  };

  render() {
    const { products, cart } = this.state;

    return (
      <div>
        <h2>상품 목록</h2>
        <ul>
          {products.map((product) => (
            <li key={product.id}>
              {product.name} - {product.price}원
              <button onClick={() => this.addToCart(product)}>장바구니에 추가</button>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default ProductList;

// src/Cart.js

import React, { Component } from 'react';

class Cart extends Component {
  state = {
    cart: [],
  };

  removeFromCart = (productId) => {
    this.setState((prevState) => ({
      cart: prevState.cart.filter((product) => product.id !== productId),
    }));
  };

  render() {
    const { cart } = this.state;

    return (
      <div>
        <h2>장바구니</h2>
        <ul>
          {cart.map((product) => (
            <li key={product.id}>
              {product.name} - {product.price}원
              <button onClick={() => this.removeFromCart(product.id)}>삭제</button>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default Cart;

4. 애플리케이션 실행

모든 구현이 완료되었으면 애플리케이션을 실행해봅시다. 다음 명령을 사용하여 개발 서버를 실행합니다.

npm start

브라우저에서 http://localhost:3000로 접속하면 쇼핑몰 장바구니 애플리케이션이 동작하는 것을 확인할 수 있습니다.

마무리

이번 포스트에서는 자바스크립트와 React.js를 사용하여 쇼핑몰 장바구니 애플리케이션을 제작하는 방법에 대해 알아보았습니다. React.js의 강력한 컴포넌트 기반 아키텍처와 상태 관리 기능을 활용하면 웹 애플리케이션 개발이 훨씬 용이해집니다. 자세한 내용은 React.js 공식 문서를 참고하시기 바랍니다.

해시태그: #자바스크립트 #React.js

© 2018 Colin. All rights reserved.