[React 완벽 가이드] section 11 : Practice Project: Building a Food Order App

이 글은 udemy의 React 완벽 가이드 with Redux, Next.js, TypeScript 강좌를 바탕으로 정리한 내용입니다.

 

139.  모듈 소개

지난 섹션에서 중요한 리액트 개념들을 살펴보았습니다. useEffect, useContext, useReducer 등등 / 위 개념을 복습하면서 다시 살펴보도록 합시다. 

 

140.  설정 시작하기

• Layout folder : ex. Header 
• UI folder: ex. Input 

 

141.  "헤더" 컴포넌트 추가하기

• header 컴포넌트 추가

 

142.  Adding the "Cart" Button Component

• Cart Button 컴포넌트 추가

 

143.  Adding a "Meals" Component

• Meals 컴포넌트 추가

 

144. Adding Individual Meal Items & Displaying Them

• Individual Meal Items 추가 

 

145. Adding a Form

const Input = (props) => {
  return (
    <div className={classes.input}>
      <label htmlFor={props.input.id}>{props.label}</label>
      <input id={props.input.id} {...props.input} />
    </div>
  );
};

export default Input;

...props.input / {type: 'text' }

const MealItemForm = (props) => {
  return (
    <form className={classes.form}>
      <Input
        label="Amount"
        input={{
          id: "amount",
          type: "number",
          min: "1",
          max: "5",
          step: "1",
          defaultValue: "1",
        }}
      />
      <button>+ Add</button>
    </form>
  );
};

export default MealItemForm;

 

146. Fixing Form Input IDs

  <Input
        label="Amount"
        input={{
          id: "amount",
          type: "number",
          min: "1",
          max: "5",
          step: "1",
          defaultValue: "1",
        }}
  />

2가지 단점이 존재한다. 

 

1. 동일한 첫번 째 입력 요소가 선택된다.

2. screen reader는 레이블 + 입력을 올바르게 연결할 수 없다. (모든 label이 동일한 입력을 가르키기 때문에)

 

<Input
    label='Amount'
    input={{
        id: 'amount_' + props.id, // this changed!
        type: 'number',
        min: '1',
        max: '5',
        step: '1',
        defaultValue: '1',
    }}
/>

<MealItemForm id={props.id} />

<MealItem
    id={meal.id} // this is new!
    key={meal.id}
    name={meal.name}
    description={meal.description}
    price={meal.price}
/>

147. Working on the "Shopping Cart" Component

• 장바구니 컴포넌트 만들기
• 추후 modal Wrapper를 추가하여 오버레이로 렌더링할 예정. 

 

148. Adding a Modal via a React Portal

• public/index.html 에 아래의 코드를 추가한다. 

 <div id="overlays"></div>

 

149. Managing Cart & Modal State

• cart 버튼 클릭시에는 modal 이 보이고, close 버튼 혹은 backdrop을 클릭하면 modal을 닫을 수 있도록 구현한다.
• 컨텍스트를 사용할 수도 있지만, 문제가 있다. 컨텍스트를 사용할 때 cart를 닫기 위해 backdrop을 클릭에 바인딩 하면 이 backdrop을 매우 한정적으로 만들게 되는 것이다. 즉 다른 종류의 콘텐츠에서는 이 modal을 사용할 수 없게 된다. backdrop 클릭 시 항상 cart가 닫히기 때문이다. 따라서 이곳에서는 props을 사용하는 것이 더 나을 수 있다. 모달의 재 사용을 가능하게 해주기 때문이다. 

150.  Adding a Cart Context

• dynamic context provider
• cart component, header component, meals component

 

151. Using the Context

• HeaderCartButton 컴포넌트에서 컨텍스트를 사용해보도록 하자. 

 

152. Adding a Cart Reducer

Any components affected by the context are re-evaluated whnever the cart data changes. 

장바구니 항목을 추가하려면 CartProvider로 이동해야 한다. 여기서 장바구니 데이터를 관리하기 때문이다. CartProvider 컴포넌트의 state로 관리하고 싶다. 즉 컨텍스트의 영향을 받는 모든 컴포넌트는 장바구니 데이터가 변경될 때마다 재평가가 된다. 여기에서는 useState 또는 useReducer를 임포트 한다. 둘다  state를 관리할 수 있는 react hooks 이지만, 여기서는 useReducer를 사용하려고 한다. (관리하려는 state가 조금 더 복잡하기 때문) 음식이 이미 장바구니에 들어있는지의 여부와 삭제하려면 더 복잡한 로직도 필요하다. 

# cartReducer 추가

const cartReducer = (state, action) => {
  if (action.type === "ADD") {
    const updatedItems = state.items.concat(action.item);
    const updatedTotalAmount =
      state.totalAmount + action.item.price * action.item.amount;
      return {
        items: updatedItems,
        totalAmount: updatedTotalAmount
      }
  }
  return defaultCartState;
};

• 외부에 cartReducer 함수를 컴포넌트 외부에 추가했다. 위 리듀서 함수는 그 컴포넌트에서는 찾을 수 있는 주변 데이터가 전혀 필요하지 않기 때문이다. 또한 컴포넌트가 재평가 될 때마다 재생성되어서는 안된다. 

const cartReducer = (state, action) => {
  if (action.type === "ADD") {
    const updatedItems = state.items.concat(action.item);
    const updatedTotalAmount =
      state.totalAmount + action.item.price * action.item.amount;
      return {
        items: updatedItems,
        totalAmount: updatedTotalAmount
      }
  }
  return defaultCartState;
};

• state는 리듀서에 의해 관리되는 state의 최신 state 스냅샵이다. 그리고 리듀서 함수에서 새 state를 반환해야 한다. 

# useReducer를 사용한 state 생성

  const [cartState, dispatchCartAction] = useReducer(
    cartReducer,
    defaultCartState
  );

• useReducer는 정확히 두 개의 요소로 된 배열을 반환한다. array destructuring을 사용하여 배열에서 요소들을 꺼내 별도의 상수에 저장할 수 있다. 첫번째 요소는 항상 state snapshot, 두번째 요소는 함수이다. 이를 툥해 리듀서에 액션을 전달할 수 있다. 
• useReducer의 첫번째 인수는 리듀서 함수를 가리킨다. 이를 바로 실행하지 않고, 가리킨다. 이후 리액트가 실행되고, 초기 state를 설정한다. 

# cartContext

  const cartContext = {
    items: cartState.itmes,
    totalAmount: cartState.totalAmount,
    addItem: addItemToCartHandler,
    removeItem: removeItemFormCartHandler,
  };

 

• cartContext 객체를 구성하기 위해 cartState가 필요하다. 빈 배열을 하드 코딩 하는 대신 cartState.Items을 사용하도록 하자. 

 

# 액션을 전달해보자. 

  const addItemToCartHandler = (item) => {
    dispatchCartAction({ type: "ADD", item: item });
  };

  const removeItemFormCartHandler = (id) => {
    dispatchCartAction({ type: "REMOVE", id: id });
  };

 

• 일반적으로 액션은 객체이다. 어떤 속성을 가지고 있고 이를 통해 해당 액션을 리듀스 함수 내부에서 식별할 수 있다. 속성 이름으로 type을 사용하도록 하겠다. (액션 식별을 위해, 이름은 마음대로 붙여도 괜찮다)
• 문자열인 경우의 규약에 따라 모두 대문자로 작성한다. 규약일 뿐! 이지만, 일반적으로 규약대로 한다. ADD 를 추가한다. 이후 리듀서 함수에 항목을 추가하기 위해 액션의 일부로, 항목을 전달하고 싶으므로 액션 객체에 두 번째 속성을 추가한다. 이름은 item! 

 

# CartReducer 의 항목 체크 로직 

const cartReducer = (state, action) => {
  if (action.type === "ADD") {
    const updatedItems = state.items.concat(action.item);
    const updatedTotalAmount =
      state.totalAmount + action.item.price * action.item.amount;
      return {
        items: updatedItems,
        totalAmount: updatedTotalAmount
      }
  }
  return defaultCartState;
};

 

• updatedItems 변수를 만들고, state.items로 설정한다. 현재 state 스냅샵의 항목은 리듀서에서 첫번째 인수로부터 얻고 있다. 그리고 concate를 호출한다. 이는 js 메소드로, 배열에 새 항목을 추가해준다. 그러나 push와 달리 기존 배열을 편집하는 게 아니라 새 배열을 반환한다. (중요!)
• state를 변경할 수 없는 방식으로 업데이트 하고 싶다는 건 이전 state 스냅샵을 편집하고 싶지 않는다는 뜻이다. js의 참조 값 때문. 즉 메모리의 기존 데이터가 편집된다. 리액트는 그것에 대해 모름.
• 따라서 완전히 새로운 state 객체를 생성하여 반환하고 싶다면 concat은 완전히 새로운 배열을 준다.  메모리에서 이전 배열을 편집하는 대신에. (더 좋음)

153. Working with Refs & Forward Refs

addItemToCartHandler가 호출되도록 만들어보자. 컨텍스트 객체의 addItem을 호출하는 곳으로 가야한다. (MealItmForm) Add 버튼이 클릭 되면, 결국 장바구니에 해당 항목을 추가하게 된다. 

 

# MealItemForm 컴포넌트에 submitHandler 함수 추가하기 

  const [amountIsValid, setAmountIsValid] = useState(true);
  const amountInputRef = useRef();
  const submitHandler = (event) => {
    event.preventDefault();

    const enteredAmount = amountInputRef.current.value;
    const enteredAmountNumber = +enteredAmount;

    if (
      enteredAmount.trim().length == 0 ||
      enteredAmountNumber < 1 ||
      enteredAmountNumber > 5
    ) {
      setAmountIsValid(false);
      return;
    }
    props.onAddToCart(enteredAmountNumber);
  };

 

• event.PreventDefault를 사용하여 브라우저가 기본적으로 페이지를 다시 로드하는 것을 막자. 
• 입력된 input 수량을 가져오기 위해 ref를 사용하자. 사용자 지정 컴포넌트이기 때문에 사용자 지정 컴포넌트에서 ref가 작동하도록 적용해야 한다. 

 # 사용자 지정 컴포넌트 Ref 사용

const Input = React.forwardRef((props, ref) => {
  return (
    <div className={classes.input}>
      <label htmlFor={props.input.id}>{props.label}</label>
      <input ref={ref} {...props.input} />
    </div>
  );
});

export default Input;

• 컴포넌트 함수를 React.forwardRef 로 감싸면, 그 컴포넌트 함수는 FOrwardRef의 인수가 된다. 그러면 ref를 얻을 수 있다. ref 프롭을 통해 컴포넌트에 설정이 가능하다. 

154.  Outputting Cart Items

  const cartItems = (
    <ul className={classes["cart-itemse"]}>
      {cartCtx.items.map((item) => (
        <CartItem
          key={item.id}
          name={item.name}
          amount={item.amount}
          price={item.price}
          onRemove={cartItemRemoveHandler.bind(null, item.id)}
          onAdd={cartItemAddHandler.bind(null, item)}
        />
      ))}
    </ul>
  );

Now on both these functions you should call bind and bind no item ID. This ensures that the idea of the to be added or removed item is passed here to remove handler and on end you should also call bind and bind null and pass the overall item. You'll learn that bind pre-configure as a function for future execution and basically allows you to pre-configure the argument that function will receive when it's being executed. And that's something we need here to ensure that both these functions do receive the ID or the item respectively.

155.  Working on a More Complex Reducer Logic

• 보충 예정

156.  Making Items Removable

• 보충 예정

157.  Using the useEffect Hook

• 보충 예정

158. Module Resources

• resources

---

https://www.udemy.com/course/best-react/