2024. 7. 3

React

•

axios 쪽 code 수정 전 코드 

const getProducts = () => {
     axios.get('http://localhost:8080/products')
        .then(res => res.data)
        .then(data => setProducts(data))
	      .catch(err => console.err(err))
}
JavaScript
복사

•

axios 쪽 code 수정 후 코드

const getProducts = async () => {
    try {
        const res = await axios.get("http://localhost:8080/products");
        const data = res.data;
        setProducts(data);
    } catch (err) {
        console.error(err);
    } 
}   
JavaScript
복사

Product 관련 코드

•

ProdBox.jsx

import axios from "axios";
import { useState } from "react";

const ProdBox = ({ prod, setProducts, products }) => {
    const [isUpdateMode, setIsUpdateMode] = useState(false);
    const handleUpdateMode = () => {
        setIsUpdateMode(true)
    }
    const handleDelete = async () => {
        try {
            const res = await axios.delete(`http://localhost:8080/products/${prod.id}`);
            const newProducts = products.filter(p => {
                return p.id != prod.id
            });
            setProducts(newProducts);
        } catch (error) {
            console.error(error);
        }
    }

    return (
        <div style={{
            textAlign: 'left',
            display: 'flex',
            flexDirection: 'column',
            width: '30%',
            padding: '10px'
        }}>
            <div style={{
                width: '100%',
                height: '100px',
                backgroundColor: 'lightgray'
            }}>
                {
                    // 내용 수정
                    isUpdateMode ?
                        <>
                            <div><input /></div>
                            <div><input /></div>
                            <button>완료</button>
                        </>
                        :
                        <>
                            <div>{prod.name}</div>
                            <div>{prod.price}</div>
                            <button onClick={handleUpdateMode}>수정</button>
                        </>
                }
                <button onClick={handleDelete}>삭제</button>
            </div>
        </div>
    );
}

export default ProdBox;
JavaScript
복사

•

ProdInput.jsx

import axios from "axios";
import { useState } from "react";

const ProdInput = ({ setProducts, products }) => {
    const [newProduct, setNewProduct] = useState({
        name: "",
        price: 0,
    });

    const handleChange = (e) => {
        const name = e.target.name;
        const value = e.target.value;
        setNewProduct({ ...newProduct, [name]: value });
      
    //   const { name, value } = e.target;
    //   setNewProduct({...newProduct, [name] : value } )
      
    //   setNewProduct({...newProduct, [e.target.name] : e.target.value})
  };

    const handleAddProd = async () => {
        const res = await axios.post("http://localhost:8080/products", newProduct);
        const newProd = res.data;
        setProducts([...products, newProd]);
  };

  return (
    <div>
        <input type="text" name="name" value={newProduct.name} onChange={handleChange}/>
        <input type="number" name="price" min="0" step="1000" value={newProduct.price} onChange={handleChange} />
        <button onClick={handleAddProd}>추가</button>
    </div>
  );
};

export default ProdInput;
JavaScript
복사

•

Product.jsx

import axios from "axios";
import { useState } from "react";

const ProdBox = ({ prod, setProducts, products, idx }) => {
    const [isUpdateMode, setIsUpdateMode] = useState(false);
    const [product, setProduct] = useState({ name: prod.name, price: prod.price });
    
    const handleChange = (e) => {
        setProduct(prevState => ({...prevState, [e.target.name]: e.target.value}))
    }

    const handleUpdateMode = () => {
        setIsUpdateMode(true);
    }

    const handleUpdate = async () => {
        try {
            // 입력한 상품명과 가격을 받아야
            // product <- 입력한 상품명과 가격
            // 서버에 업데이트 요청
            // put : 전체에 대한 변경
            // patch : 일부에 대한 변경
            
            const editProduct = {...product, id: prod.id}
            const res = await axios.put(`http://localhost:8080/products/${prod.id}`, editProduct)
            const updateProducts = products.map(p => (p.id === prod.id ? editProduct : p));
            setProducts(updateProducts);

            // 정상적으로 업데이트가 되었다면
            setIsUpdateMode(false);
        } catch (error) {
            console.error(error)
        }
    }

    const handleDelete = async() => {
        try {
            const res = await axios.delete(`http://localhost:8080/products/${prod.id}`);
            const newProducts = products.filter(p => {
                return p.id != prod.id
            });
            setProducts(newProducts);
        } catch (error) {
            console.error(error);
        }
    }

    return (
        <div style={{
            textAlign: 'left',
            display: 'flex',
            flexDirection: 'column',
            width: '30%',
            padding: '10px'
        }}>
            <div style={{
                width: '100%',
                height: '100px',
                backgroundColor: 'lightgray'
            }}>
                {
                    // 내용 수정
                    isUpdateMode ?
                        <>
                            <div><input type="text" name="name" value={product.name} onChange={handleChange} /></div>
                            <div><input type="number" name="price" value={product.price} onChange={handleChange} /></div>
                            <button onClick={() => handleUpdate(prod.id)}>완료</button>
                        </>
                        :
                        <>
                            <div>{prod.name}</div>
                            <div>{prod.price}</div>
                            <button onClick={handleUpdateMode}>수정</button>
                            <button onClick={handleDelete}>삭제</button>
                        </>
                }
            </div>
        </div>
    );
}

export default ProdBox;
JavaScript
복사

News 관련 코드

•

api 생성 후 적용
(https://newsapi.org/docs/endpoints/top-headlines → 회원가입 후 API KEY 생성)

https://newsapi.org/v2/top-headlines?country=kr&apiKey=API_KEY
JavaScript
복사

•

News.jsx

import axios from "axios";
import "./News.css";
import { useEffect } from "react";
import { useState } from "react";

const News = () => {
    const cateArr = ["business", "entertainment", "general", "health", "science", "sports", "technology"]
    const [newsList, setNewsList] = useState();
    const [isLoading, setIsLoading] = useState(true);
    const [category, setCategory] = useState("business");
    const getNews = async () => {
        try {
            // 뉴스 api 호출하여 정보 불러오기 (20개 정보 조회됨)
            const res = await axios.get(`https://newsapi.org/v2/top-headlines?country=kr&category=${category}&apiKey=7eb27740ecee473ba3dad7721eacc7b8`);
            console.log(res.data.articles);
            setNewsList(res.data.articles);
            setIsLoading(false)
        } catch (error) {
            console.error(error);
        }
    }

    const handleCategory = (e) => {
        console.log(e.target.innerText);
        setCategory(e.target.innerText);
    }

    // 딱 한번만 실행되고 멈춤
    useEffect(() => {
        getNews();
    }, [category]);

    if (isLoading) {
        return (
            <div>로딩 중</div>
        )
    }

    return (
        <>
            {
                cateArr.map((category, idx) => (
                        <button key={idx} onClick={handleCategory}>{category}</button>
                ))
            }
            <div className="news-list">
                 {newsList.map((article, idx) => (
                    <div key={idx} className="news-item">
                        <div className="thumbnail">
                            <img src={article.urlToImage} alt={article.title} />
                        </div>
                        <div className="contents">
                            <h2>{article.title}</h2>
                            <p>{article.description}</p>
                        </div>
                    </div>
                ))}
            </div>
        </>

    );
}

export default News;
JavaScript
복사

•

News.css

.news_list {
    width: 500px;
    margin-right: 10px;
}

.news-item {
    margin-left: 200px;
    margin-right: 200px;
    margin-top: 50px;
    padding: 50px 50px;
    border-radius: 20px;
    display: flex;

    background-color: white;
    border: 0.5px solid black;

    text-align: left;
    text-decoration: none;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.15);
}

.thumbnail {
    padding: 10px 20px;
}

h2 {
    font-size: 20px;
}

img {
    width: 250px;
    height: 250px;
}

p {
    display: flex;
    overflow: hidden;
} 
      
CSS
복사

Shopping

•

 react-router-dom 설치

yarn add react-router-dom
Plain Text
복사

2024. 7. 3

React

Product 관련 코드

News 관련 코드

Shopping

기타