프로젝트를 하며 더 큰 범위의 상태 관리를 하게 되었다.

그리고 평소 사용하지 않았던 메소드를 사용하기도 했다. 예를 들어 inNaN 의 경우 사실 왜 있을까? 하는 부분이었다. 하지만 아~ 이럴 때 사용하구나를 깨우치며 더 성장한 프로젝트였다.

프로젝트 기간에는 너무 뿌듯해서 블로그를 바로 작성하고 싶었지만 다음 기능을 구현하기 위해 메모 후넘어가야 했기에 이제 작성해 보려 한다~

수량은 버튼만이 아니라 text로도 적혀야한다니?!

완성 시연

배경

• 수량 변경 부분에 원래 - 와 + 을 클릭하면 1 단위로 변경되도록 했으며 수량을 나타내는 1의 경우 span으로 작성했었다.
• 하지만 생각해 보면 큰 단위를 시키고 싶을 경우, 예로 50개를 넣고 싶을 경우 소비자에게 +를 50번 클릭하게끔 하는 것은 정말 ux 상 좋지 않다. 솔직히 50개 살려고 마음먹었더라도 짜증 나서 15개쯤 클릭하다가 사지 않겠는가?
• 그래서 수량을 나타내는 부분을 span 태그에서 input 태그로 변경해야 한다는 것을 알게 되었다.

문제

• input에 숫자만 넣고 싶으면 어떻게 해야 할까?
• text 부분을 다 없애려면 어떻게 해야 할까?

시행착오

1. input type = number

시도한 이유

• 숫자만 들어가도록 만들어야겠다고 생각하니 input type = number을 사용하면 된다고 생각했다.

문제

• 이렇게 수량 부분에 아무것도 없도록 만들고 싶은데 type = number로 하면 꼭 1개의 숫자는 남아있어야 했다.

2. input type = text & 정규식

시도한 이유

• 그렇다면 남은 방법은 type = text

나아진 부분

• 빈칸이 되도록 다 지워진다

문제

• 하지만 문제는 어떻게 숫자만 처리되도록 할까?
  • 정규식을 쓸까?
    -> 정규식을 사용해서 숫자만 적힐 때 수량이 적히도록 했더니
    -> Backspace가 먹히지 않는 것이 아닌가...

3. input type = text & isNaN

나아진 부분

• 숫자만 걸러지고, Backspace로 지워지는 것도 가능

문제

• 빈칸으로 해당 부분을 나올 경우 빈칸이 되지 않도록 해야 한다.
• 특히 장바구니에서는 0 또는 빈칸을 예외 처리해 줘야 한다.

해결! input type = text & isNaN & onBlur

나아진 부분

• onBlur 이벤트를 할당해 input에서 사용자가 나올 때 빈칸이면 수량을 1로 조정해 줬다.

// onChange에 들어가는 부분
  const changeQuantityByInput = e => {
    const value = e.target.value;

    if (isNaN(value)) return;

    if (value === '0') {
      setQuantity(1);
      alert('최소 주문 수량은 1개 입니다.');
      return;
    }

    if (value > 100) {
      alert('최대 주문 수량은 100개 입니다.');
      return;
    }

    setQuantity(value);
  };

// onBlur에 들어가는 부분
  const checkMinmumQuantity = e => {
    if (!e.target.value) {
      setQuantity(1);
      alert('최소 주문 수량은 1개 입니다.');
    }
  };

 <input
   className="quantity"
   type="text"
   value={quantity}
   onChange={changeQuantityByInput}
   onBlur={checkMinmumQuantity}
   />

클릭하면 상세페이지로 넘어가는 상품 부분 위에 클릭하면 모달이 떠야 하는 장바구니 버튼이 있다면?!

완성 시연

문제

1. 상품 부분을 클릭하면 해당 상품의 상세페이지로 이동
2. 장바구니 버튼을 클릭하면 주문 Modal이 떠야 한다.

• 1과 2가 모두 클릭 이벤트로 일어나다 보니
• 상품 부분 안에 있는 장바구니 버튼을 클릭하면
  -> 원하는 것 - 주문 Modal 뜨기
  -> But, 클릭 이벤트가 버블링 되어 상품에 있는 onClick이벤트가 실행되어 상세페이지도 이동

원래 코드

• 상품 부분 전체가 Link 로 감싸져 있었다

변화된 코드

• 장바구니 버튼에 ref 를 설정
• 상품 전체에 onClick 이벤트를 주고 만약 장바구니 버튼 부분이 클릭된 것이 아닌 클릭들을 걸러냄 if (!cartBtn.current.contains(e.target))
• navigate로 상세페이지로 이동

function Product({ product, putInfoIntoModal }) {
  const { name, image, price, introduction, id } = product;
  const cartBtn = useRef();
  const navigate = useNavigate();

  const gotoProductDetail = e => {
    if (!cartBtn.current.contains(e.target)) {
      navigate(`product/${id}`);
    }
  };

  return (
    <article className="product" onClick={gotoProductDetail}>
      <div className="imgContainer">
        <img src={image} alt={name} />
        <button
          className="cartBtn"
          ref={cartBtn}
          onClick={() => putInfoIntoModal(product)}
        >
          <AiOutlineShoppingCart />
        </button>
      </div>
      <h3 className="name">{name}</h3>
      <span className="price">{Number(price).toLocaleString()}원</span>
      <span className="information">{introduction}</span>
    </article>
  );
}

메인이 카테고리 리스트를 바로 보여줘서 parmas로 각 카페고리를 이동하는 방식을 할 수 없다면?!

완성 시연

문제

• 이번 프로젝트에서 메인 화면이 상품 리스트 페이지라서 카테고리에 따라 다른 화면을 보여주는 부분을 params로 처리할 수 없어 라우터의 내장 hook인 useParams 를 이용해서 처리할 수 없었다.
• 그래서 query 를 사용해야 했다.
• 대분류(menu), 중분류(category), 정렬(sort)을 관리해 서버에게 보내고 해당 데이터를 받아야 한다.
• 제일 큰 문제 query를 처음 써본다 ㅎㅎㅎㅎ

방법

• 알아야하는 부분: 대분류(menu), 중분류(category), 정렬(sort)
• 사용 react-router-dom Hook : useSearchParams()
• new URLSearchParams();

1. searchParams.get으로 지금 query 를 읽어 값을 저장한다.
   1-1. menu, category, sort의 query 값을 받고 값이 없을 경우 기본값을 설정해서 변수에 저장한다.

2. 첫 메인 페이지이거나 menu만 있는 경우를 category, sort를 지정해서 쿼리에 보여주도록 한다.
   2-1. endpoint '/' 인 경우(쿼리에 menu 부분이 아직 할당되지 않았다면)

• 메인인 채소 부분을 바로 보여주게 한다.
  2-2. '/'가 아니지만 menu만 있는 경우
• 현재 url에서 category 와 sort를 지정해 준다.

const newSearchParams = new URLSearchParams(searchParams);
newSearchParams.set('category', '');
newSearchParams.set('sort', '-created_at');
setSearchParams(newSearchParams);
setCurrentCategory(0);
setCurrentSort(0);

3. category 를 변경할 때
   3-1. 전체보기면 빈칸
   3-2. 상세 카테고리가 선택되면 카테고리를 newSearchParams.set으로 추가해서 setSearchParams으로 parmas를 변경한다.

  const changeCategoty = (id, category) => {
    const newSearchParams = new URLSearchParams(searchParams);
    if (category === '전체보기') {
      newSearchParams.set('category', '');
    } else {
      newSearchParams.set('category', category);
    }
    setSearchParams(newSearchParams);
    setCurrentCategory(id);
  };

4. sort 를 변경할 때

• sort 부분을 카테고리에 넣는다.

  const changeSort = (id, sortName) => {
    const newSearchParams = new URLSearchParams(searchParams);
    newSearchParams.set('sort', sortName);
    setSearchParams(newSearchParams);
    setCurrentSort(id);
  };

전체코드

function ProductList() {
  const [currentCategory, setCurrentCategory] = useState(0);
  const [currentSort, setCurrentSort] = useState(0);
  const [productMenu, setProductMenu] = useState(null);
  const [products, setProducts] = useState([]);
  const [cartInfo, setCartInfo] = useState({});
  const [isCartModalOpen, setIsCartModalOpen] = useState(false);
  const [searchParams, setSearchParams] = useSearchParams();
  const [loaded, setLoaded] = useState(false);
  const menu = searchParams.get('menu') || '채소';
  const category = searchParams.get('category') || '';
  const sort = searchParams.get('sort') || '-created_at';

  useEffect(() => {
    setProductMenu(PRODUCT_MENU[menu]);
    if (!searchParams.get('menu')) {
      return;
    }

    if (category === '' && sort === '-created_at') {
      const newSearchParams = new URLSearchParams(searchParams);
      newSearchParams.set('category', '');
      newSearchParams.set('sort', '-created_at');
      setSearchParams(newSearchParams);
      setCurrentCategory(0);
      setCurrentSort(0);
    }
  }, [category, menu, searchParams, setSearchParams, sort]);

  useEffect(() => {
    fetch(
      `${API.product}?menu=${menu}${
        !category.length ? '' : `&category=${category}`
      }&sort=${sort}`
    )
      .then(res => res.json())
      .then(res => {
        if (!!res.result) {
          setProducts(res.result);
        }

        switch (res.message) {
          case 'AttributeError':
          case 'KeyError':
          case 'TypeError':
          case 'DoesNotExits':
            alert('에러입니다.');
            break;
          default:
            break;
        }
      })
      .catch(e => {
        // eslint-disable-next-line no-console
        console.error(e);
      })
      .finally(setLoaded(true));
  }, [category, menu, searchParams, sort]);

  const putInfoIntoModal = product => {
    setCartInfo(product);
    setIsCartModalOpen(true);
  };

  const closeModal = () => {
    setCartInfo({});
    setIsCartModalOpen(false);
  };

  const changeCategoty = (id, category) => {
    const newSearchParams = new URLSearchParams(searchParams);
    if (category === '전체보기') {
      newSearchParams.set('category', '');
    } else {
      newSearchParams.set('category', category);
    }
    setSearchParams(newSearchParams);
    setCurrentCategory(id);
  };

  const changeSort = (id, sortName) => {
    const newSearchParams = new URLSearchParams(searchParams);
    newSearchParams.set('sort', sortName);
    setSearchParams(newSearchParams);
    setCurrentSort(id);
  };

  return (
     <section className="productList">
      <div className="productListContent">
        {productMenu && (
          <ProductListHeader
            productMenu={productMenu}
            currentCategory={currentCategory}
            changeCategoty={changeCategoty}
          />
        )}
        {loaded && !products.length ? (
          <h2 className="loading">상품 없음</h2>
        ) : (
          <ProducListContent
            products={products}
            changeSort={changeSort}
            currentSort={currentSort}
            putInfoIntoModal={putInfoIntoModal}
          />
        )}
      </div>
      {isCartModalOpen && (
        <Modal closeModal={closeModal}>
          <CartModal closeModal={closeModal} product={cartInfo} />
        </Modal>
      )}
    </section>
  );
}

진리의 원천(source of truth)

리팩토링하게 된 배경

• 장바구니 페이지에서 상품들(items)의 state를 어떻게 관리할지에 대해 고민했다
• items 는 냉장, 상온 2 부분으로 나뉘어 화면에 나타났다.
• 상품은 체크, 수량 삭제로 변경이 되고 있었다.

잘못 생각한 부분

• 냉장 상품 부분들이 변경되면 상온 부분은 변경될 필요가 없으니 따로 관리해야겠다.

변경한 이유

• 어차피 React 는 변경된 부분만 수정하기에 나눌 필요가 없고
• 리액트의 코어 개념인 source of truth를 고려하면

  종종 동일한 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야 할 필요가 있습니다. 이럴 때는 가장 가까운 공통 조상으로 state를 끌어올리는 것이 좋습니다. - React 공식문서 -

• 1개로 items를 관리하고 이를 렌더링 할 때마다 상온과 냉장으로 분리해 보여주는 게 맞다
• 이렇게 하니 상온과 냉장으로 나누어 로직들을 반복해야 했던 부분이 대폭 줄어들어 코드가 확 줄었다.

원래 코드

import React, { useEffect, useState } from 'react';
import './Cart.scss';
import Items from './Items/Items';
import SelectBtns from './SelectBtns/SelectBtns';
import CartSummary from './CartSummary/CartSummary';

function Cart() {
  const [items, setItems] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [coldItems, setColdItems] = useState([]);
  const [boxItems, setBoxItems] = useState([]);
  const [checkedItems, setCheckedItems] = useState(0);
  const [isAllchecked, setIsAllchecked] = useState(true);

  useEffect(() => {
    fetch(`/data/cartItemsData.json`)
      });
  }, []);

  useEffect(() => {
    if (!isLoaded) return;
    if (!items || !items.length) return;
    let coldArray = [];
    let boxArray = [];
    items.forEach(item => {
      if (item.itemPackage === 'cold') {
        coldArray.push(item);
      } else {
        boxArray.push(item);
      }
    });
    setColdItems(coldArray);
    setBoxItems(boxArray);
    setCheckedItems(Items.length);
  }, [items, isLoaded]);

  useEffect(() => {
    // 첫 로딩에서는 아이템 전체가 체크되기 때문에 이부분 처리하지 않아도됨
    if (!isLoaded) return;
    // undefined(처음, 체크 손대지 않았을 때) ,  체크된 것 -> false / 체크안된 것  -> true 로 해서
    //  이분법으로 처리하기 위해
    const notCheckedColdItems = coldItems.filter(
      item => item.notChecked
    ).length;

    const notCheckedBoxItems = boxItems.filter(item => item.notChecked).length;

    const itemsLength = coldItems.length + boxItems.length;
    const checkedItemsLength =
      itemsLength - notCheckedColdItems - notCheckedBoxItems;

    setCheckedItems(checkedItemsLength);

    setIsAllchecked(itemsLength === checkedItemsLength);
  }, [coldItems, boxItems, isLoaded]);

  const changeItemQuantity = (id, changedQuantity, itemPackage) => {
    if (itemPackage === 'cold') {
      setColdItems(
        coldItems.map(item =>
          item.id !== id ? item : { ...item, quantity: changedQuantity }
        )
      );
    } else {
      setBoxItems(
        boxItems.map(item =>
          item.id !== id ? item : { ...item, quantity: changedQuantity }
        )
      );
    }
  };

  const deleteItem = (id, itemPackage) => {
    // TODO fetch
    if (itemPackage === 'cold') {
      setColdItems(coldItems.filter(item => item.id !== id));
    } else {
      setBoxItems(boxItems.filter(item => item.id !== id));
    }
  };

  const deleteAllCheckedItem = () => {
    setColdItems(coldItems.filter(item => item.notChecked));
    setBoxItems(boxItems.filter(item => item.notChecked));
  };

  const changeAllItemsCheck = isAllChecked => {
    setColdItems(
      coldItems.map(item => {
        return { ...item, notChecked: isAllChecked };
      })
    );
    setBoxItems(
      boxItems.map(item => {
        return { ...item, notChecked: isAllChecked };
      })
    );
  };

  const checkAllItems = () => {
    setIsAllchecked(!isAllchecked);
    changeAllItemsCheck(isAllchecked);
  };

  const changeItemCheck = (id, itemPackage) => {
    if (itemPackage === 'cold') {
      setColdItems(
        coldItems.map(item =>
          item.id !== id ? item : { ...item, notChecked: !item.notChecked }
        )
      );
    } else {
      setBoxItems(
        boxItems.map(item =>
          item.id !== id ? item : { ...item, notChecked: !item.notChecked }
        )
      );
    }
  };

  const orderItems = () => {
    if (checkedItems < 1) {
      alert('주문하실 상품을 선택해주세요');
      return;
    }
  return (
    <section className="cart">
      <div className="cartWrapper">
        <h2 className="cartTitle">장바구니</h2>
        <main className="main">
          <div className="cartContent">
            <SelectBtns
              checkedItems={checkedItems}
              itemsLength={coldItems.length + boxItems.length}
              checkAllItems={checkAllItems}
              isAllchecked={isAllchecked}
              deleteAllCheckedItem={deleteAllCheckedItem}
            />
            <div className="itemsWrapper">
              <Items
                title="냉장 상품"
                items={coldItems}
                changeItemQuantity={changeItemQuantity}
                deleteItem={deleteItem}
                changeItemCheck={changeItemCheck}
              />
              <Items
                title="상온 제품"
                items={boxItems}
                changeItemQuantity={changeItemQuantity}
                deleteItem={deleteItem}
                changeItemCheck={changeItemCheck}
              />
            </div>
            <SelectBtns
              checkedItems={checkedItems}
              itemsLength={coldItems.length + boxItems.length}
              checkAllItems={checkAllItems}
              isAllchecked={isAllchecked}
              deleteAllCheckedItem={deleteAllCheckedItem}
            />
          </div>
          <CartSummary
            coldItems={coldItems}
            boxItems={boxItems}
            orderItems={orderItems}
          />
        </main>
      </div>
    </section>
  );

리펙토링 후

import React, { useEffect, useState } from 'react';
import Items from './Items/Items';
import SelectBtns from './SelectBtns/SelectBtns';
import CartSummary from './CartSummary/CartSummary';
import './Cart.scss';

function Cart() {
  const [items, setItems] = useState([]);
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    fetch(`/data/cartItemsData.json`)
      });
  }, []);

  let coldItems = [];
  let boxItems = [];

  items.forEach(item => {
    if (item.itemPackage === 'cold') {
      coldItems.push(item);
    } else {
      boxItems.push(item);
    }
  });

  const checkedItemsLength =
    items.length - items.filter(item => item.notChecked).length;

  const changeItemQuantity = (id, changedQuantity) => {
    setItems(
      items.map(item =>
        item.id !== id ? item : { ...item, quantity: changedQuantity }
      )
    );
  };

  const deleteItem = id => {
    setItems(items.filter(item => item.id !== id));
  };

  const deleteAllCheckedItem = () => {
    setItems(items.filter(item => item.notChecked));
  };

  const changeAllItemsCheck = changedCheck => {
    setItems(
      items.map(item => {
        return { ...item, notChecked: changedCheck };
      })
    );
  };

  const checkAllItems = () => {
    const isAllChecked = items.length === checkedItemsLength;
    changeAllItemsCheck(isAllChecked);
  };

  const changeItemCheck = id => {
    setItems(
      items.map(item =>
        item.id !== id ? item : { ...item, notChecked: !item.notChecked }
      )
    );
  };

  const orderItems = () => {
    if (checkedItemsLength < 1) {
      alert('주문하실 상품을 선택해주세요');
      return;
    }
  return (
    <section className="cart">
      <div className="cartWrapper">
        {!isLoaded ? (
          <h2 className="loading">로딩중...</h2>
        ) : (
          <>
            <h2 className="cartTitle">장바구니</h2>
            <main className="main">
              <div className="cartContent">
                <SelectBtns
                  checkedItemsLength={checkedItemsLength}
                  itemsLength={items.length}
                  checkAllItems={checkAllItems}
                  deleteAllCheckedItem={deleteAllCheckedItem}
                />
                <div className="itemsWrapper">
                  <Items
                    title="냉장 상품"
                    items={coldItems}
                    changeItemQuantity={changeItemQuantity}
                    deleteItem={deleteItem}
                    changeItemCheck={changeItemCheck}
                  />
                  <Items
                    title="상온 제품"
                    items={boxItems}
                    changeItemQuantity={changeItemQuantity}
                    deleteItem={deleteItem}
                    changeItemCheck={changeItemCheck}
                  />
                </div>
                <SelectBtns
                  checkedItemsLength={checkedItemsLength}
                  itemsLength={items.length}
                  checkAllItems={checkAllItems}
                  deleteAllCheckedItem={deleteAllCheckedItem}
                />
              </div>
              <CartSummary
                coldItems={coldItems}
                boxItems={boxItems}
                orderItems={orderItems}
              />
            </main>
          </>
        )}
      </div>
    </section>
  );