리액트 프로젝트에 컴포넌트 구조 어떤게 더 나을까요???

쟁점은 select component안에 있는 table 요소 내부를 어떤 식으로 react.memo로 component 분리해서 children으로 처리하는게 나을까요?? 아니면 useMemo로 한 컴포넌트 내에서 처리하는게 나을까요??

1// 1번입니다.
2// select-table.tsx
3
4import React, { memo } from "react";
5import { BlockType } from "@package/api-type";
6export interface ISelectTableProps {
7  onClick: (item: string) => void;
8  list: { [Key in BlockType]: string };
9}
10
11export const SelectTable = memo(({ onClick, list }: ISelectTableProps) => {
12  return (
13    <>
14      {Object.entries(list).map((user) => (
15        <div onMouseDown={() => onClick(user[0])} key={user[0]}>
16          {user[1]}
17        </div>
18      ))}
19    </>
20  );
21});
22// --------------------------- //
23// select.tsx 
24import styled from "@emotion/styled";
25import { keyframes } from "@emotion/react";
26import React, { useState, useLayoutEffect, MouseEvent, ReactNode } from "react";
27import { PolygonIcon } from "@/assets/polygon-icon";
28export interface ISelectProps {
29  now: string;
30  children: ReactNode;
31}
32
33export const Select = ({ now, children }: ISelectProps) => {
34  const [state, setState] = useState<boolean>(false);
35  useLayoutEffect(() => {
36    document.addEventListener("click", () => {
37      setState(false);
38    });
39  }, [state]);
40  return (
41    <>
42      <_Layout>
43        <_InfoButton
44          id={now}
45          {...{ state }}
46          onClick={(e: MouseEvent<HTMLDivElement>) => {
47            e.stopPropagation();
48            setState((prev) => !prev);
49          }}
50        >
51          <div>{now}</div>
52          <_SelectIcon {...{ state: state }}>
53            <PolygonIcon />
54          </_SelectIcon>
55        </_InfoButton>
56        <_SelectList {...{ state }}>{children}</_SelectList>
57      </_Layout>
58    </>
59  );
60};
61
62// --------------------------- //
63// 2번입니다.
64// select.tsx
65import styled from "@emotion/styled";
66import { keyframes } from "@emotion/react";
67import React, { useState, useLayoutEffect, MouseEvent, useMemo } from "react";
68import { BlockType } from "@package/api-type";
69import { PolygonIcon } from "@/assets/polygon-icon";
70export interface ISelectProps {
71  onClick: (item: string) => void;
72  now: BlockType;
73  list: { [Key in BlockType]: string };
74}
75
76export const Select = ({ onClick, now, list }: ISelectProps) => {
77  const [state, setState] = useState<boolean>(false);
78  useLayoutEffect(() => {
79    document.addEventListener("click", () => {
80      setState(false);
81    });
82  }, [state]);
83  const TableMemo = useMemo(
84    () =>
85      Object.entries(list).map((user) => (
86        <div onMouseDown={() => onClick(user[0])} key={user[0]}>
87          {user[1]}
88        </div>
89      )),
90    [list]
91  );
92  return (
93    <>
94      <_Layout>
95        <_InfoButton
96          id={now}
97          {...{ state }}
98          onClick={(e: MouseEvent<HTMLDivElement>) => {
99            e.stopPropagation();
100            setState((prev) => !prev);
101          }}
102        >
103          <div>{list[now]}</div>
104          <_SelectIcon {...{ state: state }}>
105            <PolygonIcon />
106          </_SelectIcon>
107        </_InfoButton>
108        <_SelectList {...{ state }}>{TableMemo}</_SelectList>
109      </_Layout>
110    </>
111  );
112};

이 질문이 도움이 되었나요?

'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

추천해요 0

보충이 필요해요 0

익명님의 질문