section3/Unit4/ [React] 상태 관리(11/1)

블로깅 주제

• 상태관리

---

1. 지금 현재, 당신의 기분이나 느낌을 표현해 주세요.

• 리액트 커스텀 컴포넌트 어드벤스드는 매우 어려웠다... 어제 밤에 탈탈 털리고 잤다^^7

2. 오늘 무엇을 학습한 내용 중 지금 떠올릴 수 있는 단어를 모두 나열해 주세요.

• 상태관리

3. 2에서 작성한 단어를 가지고, 오늘의 학습 내용을 설명해 보세요.

- 상태관리

 

1. 전역 상태관리

상태는 변하는 데이터이다. 특별히 UI, 프론트엔드 개발에서는 "동적으로 표현되는 데이터"이다.

• "장바구니에 담기"와 같은 버튼을 눌러, 해당 물품을 장바구니에 추가할 수 있다. 동적인 데이터이므로 이것은 상태이다.
• 상단에 [일반구매/정기배송]중 현재 선택된 탭이 무엇인지 나타내는 상태가 있을 수 있다.
• 상품 선택 여부에 따라 주문 금액이나 배송비가 달라진다. 선택 여부는 변할 수 있으므로 상태이다.
• 상품 수량도 상태이다.

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

 

side effect를 최대한 배제하고 컴포넌트를 만들어라.

만일 그림과 같이 <CartItem>이라는 컴포넌트를 만든다면, fetch와 같은 API 요청이 없이도 이 컴포넌트는 작동되어야 한다. 어떤 데이터가 들어오는지 상관하지 않고, 설사 데이터가 가짜 데이터라 할지라도 컴포넌트는 표현(presentation) 그 자체에 집중하는 것이다.

 

하지만, 앱을 만들다 보면 분명 API 호출도 해야 하고, side effect는 불가피하게 생기기 마련이다. 이러한 side effect에 의존적인 상태도 있을 수 있다.

예를 들어 그림과 같이 "로딩 중"을 나타낼 것인지 아닌지 여부는 데이터 전송 여부에 따라 달려 있다. 여러분이 앱을 만들고, UI를 구성할 때에는 항상 이러한 로딩 중 상태도 고려하여야 한다.

상태의 두 가지 구분

로컬상태

로컬 상태를 구분하는 것은 쉽다. 보통 컴포넌트 내에서만 영향을 끼지는 상태는 로컬 상태이다. <CartItem> 컴포넌트의 경우, '선택한 수량'이 되겠다. 원래 가격에 상태를 곱해 컴포넌트 내에 표시되는 주문 금액을 업데이트하면 된다.

다른 컴포넌트와 데이터를 공유하지 않는 폼(form) 데이터는 대부분 로컬 상태이다. input box, select box 등과 같이 입력값을 받는 경우가 이에 해당한다.

 

전역상태

전역 상태는 다른 컴포넌트와 상태를 공유하고 영향을 끼치는 상태이다. 장바구니에 담긴 물품의 경우, 상품 선택 여부에 따라 총 주문 금액을 업데이트해야 한다. 장바구니에 담긴 물품은 그 갯수 등을 다른 컴포넌트에 전달해 주어야 한다.

아까 언급한 데이터 로딩 여부(로딩 중) 상태 역시, 앱 전반에 영향을 미친다.

JavaScript를 처음 배우면 전역 변수를 남용하는 것은 좋지 않다고 배웠다. 하지만, 경우에 따라 전역 상태가 필요하다.

서로 다른 컴포넌트가 사용하는 상태의 종류가 다르면, 꼭 전역 상태일 필요는 없다. 출처(source)가 달라도 된다.

그러나, 서로 다른 컴포넌트가 동일한 상태를 다룬다면, 이 출처는 오직 한 곳이어야 한다. 만일 사본이 있을 경우, 두 데이터는 서로 동기화(sync)하는 과정이 필요한데, 이는 문제를 어렵게 만든다. 한 곳에서만 상태를 저장하고 접근해라. 여기서 '하나의 출처'는 다른 말로 이야기하면 '전역 공간'이라고 볼 수 있다.

 

데이터 무결성을 위해, 동일한 데이터는 항상 같은 곳에서 데이터를 가지고 오도록 하자. Single source of truth(신뢰할 수 있는 단일 출처) 원칙은 프론트엔드 뿐만 아니라 다양한 곳에서 언급되는 원칙이다.

 

그렇다면 전역으로 상태를 관리해야 하는 경우가 어떤 것이 있을까?

네이버를 비롯한 여러 사이트에서 다크 모드 기능을 이용해 본 적이 한 번쯤은 있을 것이다. 이 경우 모든 페이지, 모든 컴포넌트에 다크 모드 혹은 라이트 모드가 적용이 되어야 하기 때문에 이러한 테마 설정을 전역으로 관리할 수도 있다.

그리고 국제화(Globalization) 설정도 마찬가지다. 사용자가 사용하는 브라우저나, 운영체제가 특정 언어를 사용하고 있음을 알아내서, UI에 필요한 텍스트 리소스를 따로 저장한 후, 전역 상태로 관리하기도 한다. 이 기능의 경우에도 모든 컴포넌트에서 사용자 언어로 표현이 되어야 하기 때문에 전역에서 상태 관리가 필요하다.

포토샵이나 일러스트레이터에는 히스토리 기능과 Undo/Redo를 지원한다. 화면에 표시되는 모든 내용을 전부 상태 객체로 만들어서 저장해버린다면, 원하는 특정 상태를 바탕으로 컴포넌트를 표현할 수도 있다. 이것이 Undo/Redo, 히스토리 기능의 작동 원리이다.

 

상태 관리를 위한 각종 툴

• React context
• Redux
• MobX

 

상태관리 라이브러리는 어떤 문제를 해결해주나요?

1) 전역 상태를 위한 저장소를 제공한다.

2) props drilling 문제를 해결한다.

예를 들어, <A>라는 컴포넌트에 상태가 있고, <I>라는 컴포넌트가 해당 상태를 사용한다고 하면, 그 중간에 존재하는 <C>, <G> 등은 굳이 name이라는 상태가 필요하지 않음에도, 컴포넌트에 props를 만들어 자식 컴포넌트에 넘겨주어야 했다.

이를 props drilling(프로퍼티 내려꽂기) 문제라고 부른다. 전역 상태 저장소가 있고, 어디서든 해당 저장소에 접근할 수 있다면 이러한 문제는 해결될 것이다.

 

상태 관리 툴이 반드시 필요할까? 아닙다. 상태 관리 툴이 없어도 충분히 규모 있는 애플리케이션을 만들 수 있다.

Redux의 개발자인 Dan Abramov도 'You Might Not Need Redux'라는 아티클을 통해, React 공식 문서의 "React로 사고하기"만 잘 따라와도 대부분의 문제를 해결할 수 있다고 언급한다. 그러므로 장단점을 분명히 인지하고 상태 관리 툴을 쓰자.

그리고 상태 관리의 기본기라고 볼 수 있는 "상태가 어디에 위치해야 하는지"를 먼저 익히자.

 

2. Props Drilling

Props Drilling이란?

Props Drilling은 상위 컴포넌트의 state를 props를 통해 전달하고자 하는 컴포넌트로 전달하기 위해 그 사이는 props를 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 데이터를 전달하는 현상을 의미한다. 위 그림처럼 컴포넌트 A의 state를 컴포넌트 D로 전달하기 위해선 사이에 있는 컴포넌트 B, C를 거쳐야한다.

 

Props Drilling의 문제점

Props의 전달 횟수가 5회 이내로 많지 않다면 Props Drilling 은 큰 문제가 되지 않는다. 하지만 규모가 커지고 구조가 복잡해지면서 Props의 전달 과정이 늘어난다면 아래와 같은 문제가 발생한다.

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

 

해결 방법

과도한 Props Drilling을 방지하기 위한 방법으로는 컴포넌트와 관련있는 state는 될 수 있으면 가까이 유지하는 방법과 상태관리 라이브러리를 사용하는 방법이 있습니다.

상태관리 라이브러리를 사용하게 되면 전역으로 관리하는 저장소에서 직접 state를 꺼내쓸 수 있기 때문에 Props Drilling을 방지하기에 매우 효과적이다. 

 

Props Drilling 예시

import React, { useState } from 'react';
import styled from 'styled-components';

const Container = styled.div`
  border: 5px solid green;
  padding: 10px;
  margin: 10px;
  position: relative;
`;

const Quantity = styled.h2`
  text-align: center;
  color: red;
  border: 5px solid red;
  padding: 3px;
`;

const Button = styled.button`
  margin-right: 5px;
`;

const Text = styled.h1`
  color: ${(props) => (props.color ? props.color : 'black')}
`;

export default function App() {
  const [number, setNumber] = useState(1);

  const plusNum = () => {
    setNumber(number + 1);
  };

  const minusNum = () => {
    setNumber(number - 1);
  };
  console.log('Parents');
  return (
    <Container>
      <Text>[Parents Component]</Text>
      <Text>
        Child4 컴포넌트에 있는 버튼을 통해
        <br /> state를 변경하려고 합니다.. 🤮
      </Text>
      <Text color="tomato">Props Driling이 발생!!</Text>
      <Quantity>{`수량 : ${number}`}</Quantity>
      <Child1 plusNum={plusNum} minusNum={minusNum} />
    </Container>
  );
}

function Child1({
  /* props로 전달받은 plusNum, minusNum를 가져오세요 */
  plusNum,
  minusNum,
}) {
  console.log('Child1');
  return (
    <Container>
      <Text>[Child 1 Component]</Text>
      {/* plusNum, minusNum 함수를 props로 전달해주세요! */}
      <Child2 plusNum={plusNum} minusNum={minusNum} />
    </Container>
  );
}

function Child2({
  /* props로 전달받은 plusNum, minusNum를 가져오세요 */
  plusNum,
  minusNum,
}) {
  console.log('Child2');
  return (
    <Container>
      <Text>[Child 2 Component]</Text>
      {/* plusNum, minusNum 함수를 props로 전달해주세요! */}
      <Child3 plusNum={plusNum} minusNum={minusNum} />
    </Container>
  );
}

function Child3({
  /* props로 전달받은 plusNum, minusNum를 가져오세요 */
  plusNum,
  minusNum,
}) {
  console.log('Child3');
  return (
    <Container>
      <Text>[Child 3 Component]</Text>
      {/* plusNum, minusNum 함수를 props로 전달해주세요! */}
      <Child4 plusNum={plusNum} minusNum={minusNum} />
    </Container>
  );
}

function Child4({ plusNum, minusNum }) {
  console.log('Child4');
  return (
    <Container>
      <Text>[Child 4 Component]</Text>
      <Button onClick={plusNum}>👍</Button>
      <Button onClick={minusNum}>👎</Button>
    </Container>
  );
}

 

Redux 활용 예시

import React, { useState } from 'react';
import styled from 'styled-components';
import { useSelector, useDispatch } from 'react-redux';

const Container = styled.div`
  border: 5px solid green;
  padding: 10px;
  margin: 10px;
`;

const Quantity = styled.h2`
  text-align: center;
  color: red;
  border: 5px solid red;
  padding: 3px;
`;

const Button = styled.button`
  margin-right: 5px;
`;

const Text = styled.h1`
  color: ${(props) => (props.color ? props.color : 'black')}
`;

export default function App() {
  const number = useSelector((state) => state);
  console.log('Parents');
  return (
    <Container>
      <Text>[Parents Component]</Text>
      <Text>
        Child4 컴포넌트에 있는 버튼을 통해 <br /> state를 변경하려고 합니다. ☺️
      </Text>
      <Text color="tomato">(Redux를 사용하는 경우)</Text>
      <Quantity>{`수량 : ${number}`}</Quantity>
      <Child1 />
    </Container>
  );
}

function Child1() {
  console.log('Child1');
  return (
    <Container>
      <Text>[Child 1 Component]</Text>
      <Child2 />
    </Container>
  );
}

function Child2() {
  console.log('Child2');
  return (
    <Container>
      <Text>[Child 2 Component]</Text>
      <Child3 />
    </Container>
  );
}

function Child3() {
  console.log('Child3');
  return (
    <Container>
      <Text>[Child 3 Component]</Text>
      <Child4 />
    </Container>
  );
}

function Child4() {
  const dispatch = useDispatch();
  const plusNum = () => {
    dispatch({ type: 'Plus' });
  };

  const minusNum = () => {
    dispatch({ type: 'Minus' });
  };
  console.log('Child4');
  return (
    <Container>
      <Text>[Child 4 Component]</Text>
      <Button onClick={plusNum}>👍</Button>
      <Button onClick={minusNum}>👎</Button>
    </Container>
  );
}

---

- 과제 Cmarket Hooks

app.js

setItems, setCartItems 와 같이 상태를 변경하는 함수들도 props로 넘겨줄 수 있다.

function App() {
  const [items, setItems] = useState(initialState.items);
  const [cartItems, setCartItems] = useState(initialState.cartItems);

  return (
    <Router>
      <Nav cartItems={cartItems}/>
      <Routes>
        {/* 상태 변경 함수 props로 내려주기. 상태 끌어올리기를 위해. */}
        <Route path="/" element={<ItemListContainer items={items} cartItems={cartItems} setCartItems={setCartItems}/>} />
        <Route
          path="/shoppingcart"
          element={<ShoppingCart cartItems={cartItems} items={items} setCartItems={setCartItems}/>}
        />
      </Routes>
      <img
        id="logo_foot"
        src={`${process.env.PUBLIC_URL}/codestates-logo.png`}
        alt="logo_foot"
      />
    </Router>
  );
}

 

1. 장바구니 아이템 추가

 

장바구니에 아이템을 추가하는 기능은 ItemListContainer 컴포넌트 안에서 만들어주면 된다.

그 전에 먼저 handleClick 함수 수정을 위해 item 컴포넌트를 확인하자.

item.js

import React from 'react'

export default function Item({ item, handleClick }) {

  return (
    <div key={item.id} className="item">
      <img className="item-img" src={item.img} alt={item.name}></img>
      <span className="item-name">{item.name}</span>
      <span className="item-price">{item.price}</span>
      <button className="item-button" onClick={(e) => handleClick(e, item.id)}>장바구니 담기</button>
    </div>
  )
}

ItemListContainer의 handleClick함수를 item 컴포넌트에 props로 내려주어, 클릭 이벤트가 발생하면 handleClick 함수의 파라미터로 e와 item.id를 넘겨준 후 함수가 실행될 수 있도록 되어있다.

ItemListContainer.js

function ItemListContainer({ items, cartItems, setCartItems}) {
  // 클릭하면 장바구니에 들어가게 만들기
  const handleClick = (e,id) => {
    let newCartItems = [...cartItems]; // 왜 여기는 cartItems 라고만 써도 작동되는거지..?
    let findI = cartItems.findIndex((e)=>e.itemId===id);
    // 이미 장바구니에 해당 아이템이 있으면 수량만 +1, 없으면 배열에 추가해주기
    if(findI!==-1){
      newCartItems[findI].quantity++;
      setCartItems(newCartItems);
    }else {
        setCartItems ([...newCartItems, 
          {"itemId": id,"quantity": 1}]);
    }    
  }
  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>
  );
}

findIndex를 사용하여 Item 컴포넌트로부터 받아온 id 값, 즉 장바구니에 넣기로 선택되어 '장바구니 담기' 가 눌려진 item의 id 값이 이미 cartItems에 있으면(장바구니에 해당 아이템이 이미 있으면) 수량만 하나 늘려주고 없으면(findI 값이 -1이 됨) 추가하도록 만든다.

상태 값은 멋대로 변경해주면 안되므로, newCartItems라는 새로운 배열을 선언하고 spread syntax로 cartItems 배열의 값을 그대로 넣어준다. 수량을 늘리던 요소를 추가하던 뭘하던! 이 배열을 사용하여 작업해야 한다. 원하는 모든 작업이 끝나면 setCartItems, 즉 상태 변경 함수에 해당 배열을 넘겨주어 상태 변경 함수를 통해 상태를 변경시킨다.

 

2. 장바구니 수량 변경

quantity를 나타내주는 input을 보면 수량을 늘리고 줄일 수 있는 화살표가 있다. 위 아래 화살표가 눌러질 때마다 수량이 변경될 수 있도록 해보자.

장바구니 수량 변경 기능은 ShoppingCart 컴포넌트 안에서 만들어주면 된다.

그 전에 먼저 handleQuantityChange 함수 수정을 위해 CartItem 컴포넌트를 확인하자.

ShoppingCart의 handleQuantityChange함수를 CartItem 컴포넌트에 props로 내려주어, 위/아래 화살표가 클릭되어 value가 변경되는 이벤트가 발생하면 handleQuantityChange 함수의 파라미터로 e와 item.id를 넘겨준 후 함수가 실행될 수 있도록 되어있다.

CartItem.js

<input
    type="number"
    min={1}
    className="cart-item-quantity"
    value={quantity}
    onChange={(e) => {
        handleQuantityChange(Number(e.target.value), item.id)
    }}>
</input>

ShoppingCart.js

// 각 아이템 수량 변경
  const handleQuantityChange = (quantity, itemId) => {
    const newCartItems = [...cartItems];
    let findI = cartItems.findIndex((el)=>el.itemId===itemId);
    newCartItems[findI].quantity = quantity;
    setCartItems(newCartItems);
  }

ItemListContainer의 handleClick함수를 작성했던 것과 동일한 방법으로 함수를 수정해준다.

 

3. 장바구니 아이템 삭제

ShoppingCart.js

// 아이템 삭제
  const handleDelete = (itemId) => {
    setCheckedItems(checkedItems.filter((el) => el !== itemId));
    setCartItems(cartItems.filter((el) => el.itemId !== itemId));
  }

cartItems에 필터를 사용하자. cartItems의 각 요소의 itemId와 클릭된 아이템의 Id값을 비교하여 같지 않은 요소들만 남도록 하면 된다.

 

4. Nav바 장바구니 수량 변경

app.js에서 nav바에 cartItems를  props로 내려준 뒤, Nav 컨테이너에서  {cartItems.length} 로 수량을 띄워주면 된다.

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>
        </Link>
      </div>
    </div>
  );
}