[Benny] 1주차 수요일 PR

[ghost]

안녕하세요~ 구디! 2주동안 리뷰 잘 부탁드립니다.

배포

링크

질문

• app.jsx 에서 함수를 만들어서 useContext, props로 함수를 전달하니파일이 커지는 문제가 발생합니다. 함수를 어떻게 파일별로 나누는게 좋을까요?
• useCallback으로 함수를 최적화 해서 사용하면 최적화 해서 사용하는 함수 안에 있는 함수도 useCallback을 걸어주어야 할까요? 이렇게 하다보면 모든 함수를 useCallback을 사용할 것 같아서 궁금합니다.

// 예시
 function updateWalletInfoWhenChange() {
   const copy = JSON.parse(JSON.stringify(walletInfo));

   history.current.forEach(historyLog => (copy[historyLog].number += 1));
   setTotalMoney(
     copy
       .filter(moneyUnit => !moneyUnit.total)
       .reduce((acc, { unit, number }) => acc + unit * number, 0),
   );
   setWalletInfo(copy);
   history.current = [];
 }

 const example = useCallback(()=> {function handleClickChange() {
   if (inputMoney > 0) {
     setInputMoney(0);
     dispatch({ type: ACTION_TYPE.change, changeMoney: inputMoney });
     updateWalletInfoWhenChange(); // 이 함수도 걸어주어야 할까요?
   }
 }, []}
example();

• 리렌더링을 될것을 생각하면서 useMemo, useCallback, React.memo을 이용해 최적화를 하려니 막막하네요...여러 곳에서 상태가 바뀌면서 어디부분을 최적화 해야할지...

앞으로의 계획은 학습을 하며 코드를 리팩토링하며 최적화하려고 합니다.

[junzero741]

Benny ! 안녕하세요 만나서 반갑습니다. ㅎㅎㅎ
2 주 동안 잘부탁드립니다!!
배포 링크까지 만들어주셔서 어떤 UI/UX 인지 짐작할 수 있어서 리뷰가 너무 편했습니다. 감사합니다 ㅎㅎ

useCallback으로 함수를 최적화 해서 사용하면 최적화 해서 사용하는 함수 안에 있는 함수도 useCallback을 걸어주어야 할까요? 이렇게 하다보면 모든 함수를 useCallback을 사용할 것 같아서 궁금합니다.

useCallback 이 함수를 메모하는 방법은 두 번째 인자에 전달되는 의존성 배열 내부의 값이 변했을 때인데요. 예시로 들어주신 코드에는 의존성 배열에 아무런 값이 들어있지 않아서 함수의 첫 선언 이후에는 재선언 될 일이 없을 듯 보입니다.

리렌더링을 될것을 생각하면서 useMemo, useCallback, React.memo을 이용해 최적화를 하려니 막막하네요...여러 곳에서 상태가 바뀌면서 어디부분을 최적화 해야할지...

저도 마음 같아서는 모든 페이지의 모든 컴포넌트를 최적화 시키고 싶지만 그러기엔 시간도 체력도 부족해서 막막할 때가 많습니다...ㅎㅎ 그럴 때는 개발된 화면과 코드를 보시면서 어느 부분이 전체 렌더링 프로세스에 있어서 병목을 발생시키는 지 순위를 매겨서 차례대로 최적화를 시키는 게 좋을 듯 합니다!

[junzero741]

디바운스를 직접 구현하신건 너무 좋지만, 스타일 컴포넌트를 모아놓은 폴더안에 있는건 어딘가 부자연스러운 느낌이 듭니다.

[junzero741]

Money 컴포넌트에 children이 들어갈게 아니라면 self closing tag를 사용해도 좋을 것 같습니다.

[junzero741]

모듈을 임포트 해올 때 상대경로를 사용하게 되면, 나중에 폴더 구조가 복잡해졌을 때 '../../../../components/menu' 처럼 구문이 지저분해질 수 있습니다! 절대경로에 대한 내용을 찾아보시고 적용하는걸 추천드려요!

[junzero741]

Money 컴포넌트를 메모이제이션하려고 하셨는데요. React.memo 가 prop을 비교하는 방법에 대해서 공부해보시면 좋을 것 같습니다.

[junzero741]

app.jsx 에서 함수를 만들어서 useContext, props로 함수를 전달하니파일이 커지는 문제가 발생합니다. 함수를 어떻게 파일별로 나누는게 좋을까요?

app.jsx 에서 모든 상태를 관리하려다 보니 생긴 문제인 것 같습니다.
지갑과 메뉴, 돈의 상태를 전역에서 참조하고 수정해야 한다면 context API 를 활용해보시는 것을 추천드립니다.