react, rn 리스트 엔트리 구현시 원본 리스트를 수정하는 함수 최적화가 고민됩니다..

스무스하게 하시려면 외부 상태 라이브러리나 useReducer를 쓰는게 좋습니다. 굳이 props로 넘기는 방식으로 만든다 그러면 아래와 같은 방향으로 구현하면 좋을듯 합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
"use client";

import {
  Dispatch,
  Fragment,
  RefObject,
  SetStateAction,
  useRef,
  useState,
  useCallback,
} from "react";

type MyListData = RefObject<string[] | null>;

const RenderingRef = () => {
  const list = useRef<string[] | null>(["this", "is", "data"]);
  const changeFunctionC = useCallback(
    // 비동기 작업 아무거나
    async (list: MyListData, setAction: Dispatch<SetStateAction<boolean>>) => {
      let newList: string[] = [];
      if (list.current) {
        newList = [...list.current, "추가"];
      }
      //.. start await
      list.current = newList;
      console.log("🚀 ~ changeFunctionC ~ current:", list.current);
      //.. end await

      // 새로운 데이터 랜더링하도록 전파, 함수 변경과는 상관없음
      setAction((prev) => !prev);
    },
    []
  );

  console.log("Parent Rendered");
  return (
    <div>
      <h2>Ref를 사용해 보자</h2>
      <YourCompB list={list} changeFunctionC={changeFunctionC} />
    </div>
  );
};

type YourCompBProps = {
  list: MyListData;
  changeFunctionC: (list: MyListData, setAction: Dispatch<SetStateAction<boolean>>) => void;
};

const YourCompB = ({ list, changeFunctionC }: YourCompBProps) => {
  const [isChanged, setIsChanged] = useState(false);

  console.log("값 바뀌었데~ , isChanged: ", isChanged);
  console.log("Child Rendered");
  if (!list.current || list.current.length === 0)
    return (
      <>
        <p>데이터 없어용~</p>
      </>
    );
  return (
    <>
      {list.current.map((item, index) => {
        return (
          <Fragment key={index}>
            <p className="text-white">{item}</p>
          </Fragment>
        );
      })}
      <button
        onClick={() => {
          changeFunctionC(list, setIsChanged);
        }}
      >
        조작버튼
      </button>
    </>
  );
};

export default RenderingRef;