refactor(SelectBox): 컴포넌트 및 사용처에 memoization 적용

woowacourse · Jun 9, 2023 · a3aad30 · a3aad30
1 parent a69c602
commit a3aad30
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/src/components/@common/SelectBox/SelectBox.tsx b/src/components/@common/SelectBox/SelectBox.tsx
@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import styled from 'styled-components';
 
 type Options = { name: string; value: string };
@@ -20,7 +21,7 @@ const SelectBox = ({ value, options, onChange }: SelectBoxProps) => {
   );
 };
 
-export default SelectBox;
+export default memo(SelectBox);
 
 const Select = styled.select`
   width: 100%;

diff --git a/src/components/Layout/Header/Header.tsx b/src/components/Layout/Header/Header.tsx
@@ -1,3 +1,4 @@
+import { useCallback, useMemo } from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
@@ -21,14 +22,14 @@ const Header = () => {
   const loadableCartProducts = useRecoilValueLoadable(cartProductsState);
   const cartProductCount = loadableCartProducts.state === 'loading' ? 0 : loadableCartProducts.contents.size;
 
-  const serverOwner = store.getStorage<ServerOwner>(SERVER_OWNER) ?? '헙크';
+  const serverOwner = useMemo(() => store.getStorage<ServerOwner>(SERVER_OWNER) ?? '헙크', []);
 
-  const handleServerOwner = (e: React.ChangeEvent<HTMLSelectElement>) => {
+  const handleServerOwner = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
     const value = e.target.value as ServerOwner;
 
     store.setStorage(SERVER_OWNER, value);
     window.location.reload();
-  };
+  }, []);
 
   return (
     <HeaderContainer>