perf: tag list에 memo를 사용하여 최적화를 적용하라 (#613)

- 홈 화면에서 필터링이 적용될 때 불필요한 tag 렌더링 최적화
- 글 작성 시 input 값이 변경될 때 불필요하게 tag가 리렌더링되는 곳 최적화 적용
- profile image에 memo 적용

src/components/common/EmptyStateArea.tsx

@@ -1,4 +1,4 @@
-import { memo, ReactElement } from 'react';
+import { ReactElement } from 'react';
 
 import styled from '@emotion/styled';
 
@@ -46,7 +46,7 @@ function EmptyStateArea({
   );
 }
 
-export default memo(EmptyStateArea);
+export default EmptyStateArea;
 
 const EmptyStateWrapper = styled.section<{ marginTop: string; }>`
   display: flex;

src/components/common/ProfileImage.tsx

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import { memo, ReactElement } from 'react';
 
 import Image from 'next/image';
 
@@ -50,7 +50,7 @@ function ProfileImage({
   );
 }
 
-export default ProfileImage;
+export default memo(ProfileImage);
 
 const ProfileAvatarImage = styled(Image)`
   border-radius: 70%;

src/components/common/SwitchButton.tsx

@@ -9,17 +9,19 @@ interface Props {
   defaultChecked: boolean;
 }
 
-const SwitchButton = ({ onChange, defaultChecked }: Props) => (
-  <SwitchButtonWrapper
-    name="switch-toggle"
-    defaultChecked={defaultChecked}
-    title="switchButton"
-    aria-label="No label tag"
-    onChange={onChange}
-    icons={false}
-    data-testid="switch-button"
-  />
-);
+function SwitchButton({ onChange, defaultChecked }: Props) {
+  return (
+    <SwitchButtonWrapper
+      name="switch-toggle"
+      defaultChecked={defaultChecked}
+      title="switchButton"
+      aria-label="No label tag"
+      onChange={onChange}
+      icons={false}
+      data-testid="switch-button"
+    />
+  );
+}
 
 export default SwitchButton;
 

src/components/common/Tag.tsx

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import { memo, ReactElement } from 'react';
 import { X as CloseSvg } from 'react-feather';
 
 import { useTheme } from '@emotion/react';
@@ -37,7 +37,7 @@ function Tag({ tag, onRemove, onClick }: Props): ReactElement {
   );
 }
 
-export default Tag;
+export default memo(Tag);
 
 const TagWrapper = styled.div`
   display: inline-flex;

src/components/home/TagsBar.tsx

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import { memo, ReactElement, useCallback } from 'react';
 
 import styled from '@emotion/styled';
 import { useSetRecoilState } from 'recoil';
@@ -13,23 +13,25 @@ function TagsBar(): ReactElement {
 
   const setGroupsCondition = useSetRecoilState(groupsConditionState);
 
+  const onClick = useCallback((name: string) => setGroupsCondition((prev) => ({
+    ...prev,
+    tag: name,
+  })), []);
+
   return (
     <TagsWrapper>
       {tags.map(({ name }) => (
         <Tag
           key={name}
           tag={name}
-          onClick={() => setGroupsCondition((prev) => ({
-            ...prev,
-            tag: name,
-          }))}
+          onClick={() => onClick(name)}
         />
       ))}
     </TagsWrapper>
   );
 }
 
-export default TagsBar;
+export default memo(TagsBar);
 
 const TagsWrapper = styled.div`
   height: 36px;

src/components/write/TagForm.tsx

@@ -53,10 +53,10 @@ function TagForm({ tags: initialTags, onChange }: Props): ReactElement {
     actionKeyEvent(e, ['Enter']);
   }, [actionKeyEvent]);
 
-  const handleRemove = (nextTags: string[]) => {
+  const handleRemove = useCallback((nextTags: string[]) => {
     setTags(nextTags);
     onChange(nextTags);
-  };
+  }, [onChange]);
 
   useEffect(() => {
     setTags(initialTags);

src/components/write/TagList.tsx

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import { memo, ReactElement, useCallback } from 'react';
 
 import Tag from '../common/Tag';
 
@@ -8,11 +8,11 @@ interface Props {
 }
 
 function TagList({ onRemove, tags }: Props): ReactElement {
-  const handleRemove = (target: string) => {
+  const handleRemove = useCallback((target: string) => {
     const nextTags = tags.filter((tag) => tag !== target);
 
     onRemove(nextTags);
-  };
+  }, [tags, onRemove]);
 
   return (
     <>
@@ -27,4 +27,4 @@ function TagList({ onRemove, tags }: Props): ReactElement {
   );
 }
 
-export default TagList;
+export default memo(TagList);

src/containers/write/WriteFormContainer.tsx

@@ -13,7 +13,7 @@ function WriteFormContainer(): ReactElement | null {
 
   const onChangeFields = useCallback((form: Partial<WriteFields>) => {
     changeFields((prevState) => ({ ...prevState, ...form }));
-  }, [changeFields]);
+  }, []);
 
   if (!user) {
     return null;