[DOTORI] 2주차 첫번째 PR #82

mogooee · 2022-05-18T09:45:10Z

🤔 step3 진행상황

🤹‍♀️ 데모페이지

[ 구현 완료 ]

Coin Component 최적화
- useMemo, useCallback
History Component
- 지갑에서 금액 투입시 알림 기능
  - useReducer
- 자판기에서 금액 투입시 알림 기능
- 상품을 선택했을 때 선택한 상품과 잔돈에 대한 알림 문구를 출력한다.
- 반환버튼을 눌렀을 때 잔돈 알림을 출력한다.

[ 구현 예정 ]

자판기 기능 구현

[ 고민하는 점 ]

리렌더링 최적화
CoinProvider에서 coin과 selectCoin의 provider를 분리하여 최적화를 해결했습니다.
하지만 아직 개념에 대한 이해가 부족해서 질문 남기게 되었습니다!

현재 useCoin의 selectCoin이 useCallback을 사용하고 있습니다.
이전에는 함수 자체를 props로 넘겨주는 것이 아니라 또다른 하나의 객체{} 로 만들어 props로 넘겨주었기 때문에, {coin, selectCoin}에 대한 다른 참조값을 계속해서 만들어내는 것이 useCallback을 무용하게 만들었다고 생각하고 있습니다. 하지만 selectCoin은 Coin 컴포넌트 내부에서 실행되는 함수인데 참조값이 바뀌는 것과 Coin 컴포넌트가 리렌더링 되는 것과는 무관한게 아닌가하는 고민이 생겼습니다. 🥲

 <CoinContext.Provider value={coin, selectCoin}>
      {children}
    </CoinContext.Provider>

 <CoinContext.Provider value={coin}>
      <SetCoinContext.Provider value={selectCoin}>{children}</SetCoinContext.Provider>
    </CoinContext.Provider>

* update: money data * design: Coin Component * design: Balance Component * design: Wallet Component

* update: product data * design: VendProduct Component * design: VendController Component * design: HistoryBox Component * design: VendingMachine Component * design: ChangeOutlet Component * design: InsertCoin Component * refactor: VendController Component의 하위컴포넌트 분리 * chore: update yarn.lock

* feat: Button Component 구현 * feat: InsertCoin, BrandLabel, Unit에 Button Component 적용 * chore: polished 라이브러리 설치 * refactor: Nav를 NavLink 적용하여 리팩토링

* [DOTORI] 1주차 첫번째 PR (#25) * chore: 프로젝트 초기 셋팅 (#2) * feat:VendingMachine, Wallet 라우팅 (#5) * Wallet Component - Markup (#6) * update: money data * design: Coin Component * design: Balance Component * design: Wallet Component * VendingMachine Component - Markup (#9) * update: product data * design: VendProduct Component * design: VendController Component * design: HistoryBox Component * design: VendingMachine Component * design: ChangeOutlet Component * design: InsertCoin Component * refactor: VendController Component의 하위컴포넌트 분리 * chore: update yarn.lock * Common Components 분리(1) (#10) * feat: Button Component 구현 * feat: InsertCoin, BrandLabel, Unit에 Button Component 적용 * chore: polished 라이브러리 설치 * refactor: Nav를 NavLink 적용하여 리팩토링 * chore: gh-pages 라이브러리 설치 * feat: useDisplay 커스텀 훅 생성 * feat: AppLayout, ToggleDisplay Component 구현 * feat: DisplayProvider 구현 displayMode를 전역 상태로 관리한다. * design: title font 변경, change outlet title 대문자로 변경

* refactor: components 디렉토리 구조 변경 * feat: common components - Nav 구현 * refactor: 라우터 모듈 분리 * refactor: 사용하지 않는 styled-components 제거, div->span, strong 태그 변경 * refactor: CoinContainer, VendProductContainer Component 분리

* feat: 금액 버튼 클릭시 해당 금액 개수 감소 렌더링 useCoin 커스텀 훅 사용 * feat: 금액 버튼 클릭시 잔고 금액 감소 렌더링 useBalance 커스텀 훅 사용 * feat: CoinProvider 생성 outlet 상위 컴포넌트에 생성하여 라우팅에 따른 상태 초기화 방지 * feat: InsertCoinProvider 구현 지갑에서 선택한 금액을 자판기에 투입된 금액으로 렌더링 * rename: components 디렉토리 구조 수정

coin state로 연산할 수 있는 balance state를 제거

* refactor: setCoin 로직 변경 배열의 카피본에서 같은 값을 갖는 인덱스 요소의 객체를 변경 -> map 사용 * refactor: grid repeat 함수 적용 * refactor: Coin Component useMemo 적용, setProvider 분리 Coin Component 클릭시 금액의 변동사항이 있는 컴포넌트만 리렌더링 된다.

useReducer 적용

kowoohyuk · 2022-05-19T00:28:04Z

도토리 안녕하세요!
개인적인 사정으로 저녁쯤 리뷰 드릴 수 있을 것 같아요.. 🙏
늦어져서 죄송합니다! 😢

kowoohyuk

도토리 안녕하세요!
json입니다!

먼저 리뷰가 늦어진점 다시 한 번 사과드립니다 🙇
저번에 말씀하신 것처럼 리렌더링 관련해서 많은 고민이 있으신 것 같아요!

말씀하신 것처럼 기존에는 object({{ coin, selectCoin }})형태로 사용했기 때문에 리렌더링이 발생합니다.
또한, 현재의 구조에서는 select에 해당하는 Context가 State에 해당하는 Context의 하위 컴포넌트이며,
selectCoin을 통해 coin의 상태가 변경되기 때문에 리렌더링이 발생하게 됩니다.
충분한 답변이 되었을까요...?!

개발하시느라 수고많으셨습니다!! 😄

kowoohyuk · 2022-05-19T14:08:43Z

src/components/Coin/Coin.jsx

+const areEqual = (prevProps, nextProps) => {
+  return prevProps.count === nextProps.count;
+};


중괄호와 리턴을 추가한 이유가 궁금합니다!
컨벤션을 바꾸신 걸까요?!

앗 아무 생각없이 썼네요..! 수정했습니다 🥲

kowoohyuk · 2022-05-19T14:10:08Z

src/components/vend-product/VendProductContainer.jsx

@@ -4,7 +4,7 @@ import { VendProduct } from "./VendProduct";

 const StyledVendProductContainer = styled.ul`
  display: grid;
-  grid-template-columns: 25% 25% 25% 25%;
+  grid-template-columns: repeat(4, 1fr);


kowoohyuk · 2022-05-19T14:12:22Z

src/context/HistoryProvider.jsx

@@ -0,0 +1,47 @@
+import { useCallback } from "react";
+
+const { createContext, useReducer } = require("react");


일관성을 위해 import로 변경하면 어떨까요?? ✋

자동완성 기능을 사용해서 몰랐는데 확인을 꼭 해야겠네요..! 감사합니다 🙏

kowoohyuk · 2022-05-19T14:16:34Z

src/context/HistoryProvider.jsx

+      histories.history = histories.history.concat({
+        ...history,
+        id: histories.history.length + 1,
+        comment: `${history.coin}원이 투입되었습니다.`,
+      });
+      return histories;
+    case "CHANGE_COIN":
+      histories.history = histories.concat({
+        ...history,
+        commet: `${history.change}이 반환되었습니다.`,
+      });
+      return histories;
+    case "PURCHASE_PRODUCT":
+      histories.history = histories.concat({ ...history, commet: `${history.product}를 구매했습니다.` });


공통되는 부분을 함수로 분리해도 괜찮을 것 같습니다!

kowoohyuk · 2022-05-19T14:17:26Z

src/hooks/useCoin.jsx

-    },
-    [coin]
-  );
+  const selectCoin = useCallback((unit) => {


mogooee and others added 16 commits May 10, 2022 15:37

chore: 프로젝트 초기 셋팅 (#2)

e7746bc

feat:VendingMachine, Wallet 라우팅 (#5)

39401cb

Wallet Component - Markup (#6)

c7fc0db

* update: money data * design: Coin Component * design: Balance Component * design: Wallet Component

Common Components 분리(1) (#10)

d7e799f

* feat: Button Component 구현 * feat: InsertCoin, BrandLabel, Unit에 Button Component 적용 * chore: polished 라이브러리 설치 * refactor: Nav를 NavLink 적용하여 리팩토링

chore: gh-pages 라이브러리 설치

f063227

Merge remote-tracking branch 'origin' into develop1

a249a85

remove: merge로 생성된 중복 파일 제거

7081dc3

rename: 컴포넌트 디렉토리명 대문자로 변경

5160b7c

refactor: balance state 제거, useBalance삭제

3dabc6c

coin state로 연산할 수 있는 balance state를 제거

Merge remote-tracking branch 'origin' into develop1

f2c0cc6

feat: 지갑에서 금액을 투입하면 알림 문구가 뜬다. (#23)

c58c3ea

useReducer 적용

mogooee requested a review from kowoohyuk May 18, 2022 09:45

mogooee self-assigned this May 18, 2022

BB-choi mentioned this pull request May 18, 2022

[BB] 웹자판기 2주차 PR - 1 #86

Merged

kowoohyuk approved these changes May 19, 2022

View reviewed changes

kowoohyuk merged commit 75ed2d7 into codesquad-members-2022:dotori May 19, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DOTORI] 2주차 첫번째 PR #82

[DOTORI] 2주차 첫번째 PR #82

mogooee commented May 18, 2022

kowoohyuk commented May 19, 2022

kowoohyuk left a comment

kowoohyuk May 19, 2022

mogooee May 20, 2022

kowoohyuk May 19, 2022

kowoohyuk May 19, 2022

mogooee May 20, 2022

kowoohyuk May 19, 2022

kowoohyuk May 19, 2022

		@@ -0,0 +1,47 @@
		import { useCallback } from "react";

		const { createContext, useReducer } = require("react");

[DOTORI] 2주차 첫번째 PR #82

[DOTORI] 2주차 첫번째 PR #82

Conversation

mogooee commented May 18, 2022

🤔 step3 진행상황

🤹‍♀️ 데모페이지

[ 구현 완료 ]

[ 구현 예정 ]

[ 고민하는 점 ]

kowoohyuk commented May 19, 2022

kowoohyuk left a comment

Choose a reason for hiding this comment

kowoohyuk May 19, 2022

Choose a reason for hiding this comment

mogooee May 20, 2022

Choose a reason for hiding this comment

kowoohyuk May 19, 2022

Choose a reason for hiding this comment

kowoohyuk May 19, 2022

Choose a reason for hiding this comment

mogooee May 20, 2022

Choose a reason for hiding this comment

kowoohyuk May 19, 2022

Choose a reason for hiding this comment

kowoohyuk May 19, 2022

Choose a reason for hiding this comment