React - 서버에서 데이터 가져와서 화면에 뿌리기

(AppProduct.jsx)

import React, { useState } from 'react';
import './App.css';
import Products from './components/Products'

export default function AppProducts() {
    const [showProducts, setShowProducts] = useState(true);
    return (
        <div>
            {showProducts && <Products />}
            <button onClick={()=>{setShowProducts((show) => !show)}}>Toggle</button>
        </div>
    );
}

(Product.jsx)

import React, { useEffect, useState } from 'react';

export default function Products() {
    // const [count, setCount] = useState(0);
    const [products, setProducts] = useState([]);
    const [checked, setChecked] = useState(false);
    
    const handleChange = ()=>{
        setChecked((prev) => !prev);
    }

    useEffect(()=>{
        fetch(`data/${checked ? 'sale_' : ''}products.json`)
        .then((res) => res.json())
        .then((data) => {
            console.log("데이터 네트워크에서 받아옴")
            setProducts(data);
            console.log(data)
        });
        return ()=> {
            console.log('청소')
        }
    }, [checked])

    return (
        <>
            <input 
                id='checkbox' 
                onChange={handleChange} 
                value={checked} 
                type='checkbox' 
            />
            <label htmlFor='checkbox'>세일하는 상품만 보기</label>
            <ul>
                {products.map((product)=>{
                    return (
                        <li key={product.id}>
                            <article>
                                <h3>{product.name}</h3>
                                <p>{product.price}</p>
                            </article>
                        </li>
                    )
                    
                })}
            </ul>
            {/* <button onClick={()=>{ setCount(count + 1) }}>{count}</button> */}
        </>
    );
}

서버에서 그냥 상품 데이터와, 세일 상품 데이터를 checkbox에 따라 유동적으로 가져오는 코드를 짰다.

1. 우선 데이터를 화면에 뿌릴 코드 작성. ul태그에 products 개수만큼 map함수를 사용하여 화면에 뿌려주게끔 코드 작성
2. input태그로 checkbox 만들고 label 태그와 연결시키기 위해 id를 checkbox로 해서 만듬. 이후 label 태그에 htmlFor 속성에 checkbox로 하여 input 태그와 연결시킴.
3. checked state를 만들어서 checked 되었을때는 세일하는 상품, 아닐때는 세일하지 않는 상품을 보여주게 함.
4. checkbox에 onChange 이벤트로 체크되면 handleChange 함수를 실행시킴
   ( handleChange 함수는 setChecked((prev) => !prev) 이 코드를 통해 checked의 기본값은 false고 클릭하면 true가 된다. )
5. useEffect에 fetch를 사용하여 checked 값에 따라 다른 url로 부터 데이터를 가져와 setProducts 배열안에 data를 넣으면 끝

하면서 배운 점

1. input 태그와 label 태그를 연결시킬때 input 태그의 id값과 label 태그의 htmlFor 값을 같게 하여 연결시킬 수 있다
2. useEffect로 데이터를 가져와 화면에 뿌리는 도중 콘솔창엔 분명 데이터가 잘 가져와지는데 화면에 뿌려지지 않아서 고민을 하다가 해결했는데 이유는 화면에 뿌려지는 코드에서 map함수를 쓸때 map(()=>{}) 여기서 {} 안에 return을 안써서 안되는거였다. {} 대신 ()를 쓰거나 {}안에 return을 쓰면 잘 나오는데 그냥 {}만 쓰면 안되는거였음