📢 프론트엔드 개발에서의 상태 관리

상태란 무엇인가 ? UI에 동적으로 표현될 데이터를 의미합니다.

Side Effect ? 함수 또는 컴포넌트의 입력 외에도 함수의 결과에 영향을 미치는 요인을 말합니다. 대표적으로 네트워크 요청, API 호출

로컬 상태

• 특정 컴포넌트 안에서만 관리되는 상태
  => 보통 컴포넌트 내에서만 영향을 끼치는 상태
  예) 장바구니를 예시로 든다면, '선택한 수량'이 로컬 상태이다. 원래 가격에 상태를 곱해 컴포넌트 내에 표시되는 주문 금액을 업데이트하면 된다.

전역 상태

• 프로덕트 전체 혹은 여러 가지 컴포넌트가 동시에 관리하는 상태
  => 다른 컴포넌트와 상태를 공유하고 영향을 끼치는 상태
  예) 장바구니를 예시로 든다면, 장바구니에 담긴 물품의 경우 상품 선택 여부에 따라 총 주문 금액을 업데이트 해야하며, 장바구니에 담긴 물품은 그 갯수 등을 다른 컴포넌트에 전달해 주어야 한다.

전역 상태에서의 데이터 무결성

데이터 무결성이란 ? 데이터의 정확성을 보장하기 위해 데이터의 변경이나 수정 시 제한을 두어 안정성을 저해하는 요소를 막고 데이터 상태들을 항상 옳게 유지하는 것입니다.

📢 Props Drilling

Props Drilling이란? 상위 컴포넌트의 state를 props를 통해 전달하고자 하는 컴포넌트를 전달하기 위해 그 사이는 props를 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 데이터를 전달하는 현상을 의미합니다.

Props Drilling의 문제점

• 코드의 가독성이 매우 나빠지게 됩니다.
• 코드의 유지보수 또한 힘들어지게 됩니다.
• state 변경시 props 전달 과정에서 불필요하게 관여된 컴포넌트들 또한 리렌더링이 발생합니다. 따라서, 웹 성능에 악영향을 줄 수 있습니다.

해결방법

• 컴포넌트와 관련있는 state는 될 수 있으면 가까이 유지하는 방법
• 상태관리 라이브러리를 사용하는 방법

상태관리 라이브러리를 쓰는 이유

• 전역으로 관리하는 저장소에서 직접 state를 꺼내쓸 수 있기 때문에 Props Drilling을 방지하기에 매우 효과적입니다.
• 라이브러리 종류로는 Redux, Context api, Mobx, Recoil등이 있습니다.

---

과제1 - Cmarket Hooks 🛒

1. 페이지 전환

• 루트 컴포넌트 : , , 로 구분을 지어줍니다.
• 내비게이션 바 : SPA 내에서 화면 전환에 따라 URL를 업데이트하기 위해 컴포넌트를 사용합니다.

App.js

function App() {
  const [items, setItems] = useState(initialState.items);
  const [cartItems, setCartItems] = useState(initialState.cartItems);
  return (  
    <Router>
      <Nav cartItems = {cartItems}/>
      <Routes>
        <Route path="/" element={<ItemListContainer cartItems = {cartItems} setCartItems = {setCartItems} items={items} />} />
        <Route
          path="/shoppingcart"
          element={<ShoppingCart cartItems={cartItems} setCartItems = {setCartItems} items={items} />}
        />
      </Routes>
      <img
        id="logo_foot"
        src={`${process.env.PUBLIC_URL}/codestates-logo.png`}
        alt="logo_foot"
      />
    </Router>
  );
}
export default App;

Nav.js

function Nav({cartItems}) {
  return (
    <div id="nav-body">
      <span id="title">
        <img id="logo" src="../logo.png" alt="logo" />
        <span id="name">CMarket</span>
      </span>
      <div id="menu">
        <Link to="/">상품리스트</Link>
        <Link to="/shoppingcart">
          장바구니<span id="nav-item-counter">{cartItems.length}</span>  // cartItems.length으로 수량 바꿔주기
        </Link>
      </div>
    </div>
  );
}
export default Nav;

2. 장바구니에 추가 및 상품 개수 업데이트

• 메인 화면에서 [장바구니 담기] 버튼을 누른 후, 장바구니 페이지로 이동하면 상품이 담겨있어야 합니다.
• 장바구니 페이지에서 장바구니에 담긴 각 아이템의 개수를 변경할 수 있어야 합니다.
• 내비게이션 바에 상품 개수가 즉시 표시되어야 합니다.

ItemListContainer.js

function ItemListContainer({ cartItems, setCartItems, items }) {
  const handleClick = (e, index) => {
    let addNew = {};
    addNew.itemId = index;
    addNew.quantity = 1;
    if(cartItems.length === 0) setCartItems([...cartItems, addNew])
    for(let i = 0; i < cartItems.length; i++) {
      if(cartItems[i].itemId === index) { // 장바구니에 없는 아이템은 추가
        setCartItems([...cartItems])
        cartItems[i].quantity++
      } else {  // 장바구니에 있는 아이템이면 수량만 추가
        setCartItems([...cartItems, addNew])
      }
    }
   }
  return (
    <div id="item-list-container">
      <div id="item-list-body">
        <div id="item-list-title">쓸모없는 선물 모음</div>
        {items.map((item, idx) => <Item item={item} key={idx} handleClick={handleClick} />)}
      </div>
    </div>
  );
}
export default ItemListContainer;

ShoppingCart.js

const handleQuantityChange = (quantity, itemId) => {
    const newCart = [...cartItems];
    const idFilter = cartItems.findIndex(el => el.itemId === itemId); // newCart[인덱스번호]의 수량 = 받아온 수량 으로 바꿔준다.
    newCart[idFilter].quantity = quantity;
    setCartItems(newCart);
  }

3. 장바구니로부터 제거

• 장바구니 페이지에서 [삭제] 버튼을 누른 후, 해당 상품이 목록에서 삭제되어야 합니다.
• 내비게이션 바에 상품 개수가 즉시 표시되어야 합니다.

ShoppingCart.js

  const handleDelete = (itemId) => {
    setCheckedItems(checkedItems.filter((el) => el.itemId !== itemId))
    setCartItems(cartItems.filter(el => el.itemId !== itemId))
  } 
  // filter을 사용하여 el.itemId와 클릭된 itemId값을 비교해서 같은 값만 삭제되도록 

---

오늘 학습을 마치고 나서, 📖

과제 코드 작성하는 부분은 인터넷의 힘을 빌렸다. 혼자 작성해보고 싶었지만 대체 뭘 작성해야하는건지 막막한 상태였다. 제출하는 과제가 아니라 그나마 여유롭게 더 공부 할 수 있는 것 같다. 내일 리덕스를 배우는데 리덕스 부분을 잘 기억하고 이해하면 될 것 같다. 개인적으로 만들고 있는 미니 프로젝트에도 리덕스를 사용하고 있어 배우면 미니 프로젝트에도 도움이 될 것 같다. 리액트는 매번 어렵고 새롭다. 리액트 쉽지 않다.. 만만치 않은 녀석이다..