antdesign - Transfer 주의사항

 const onChange = (nextTargetKeys, direction, moveKeys) => {
    setTargetKeys(nextTargetKeys);
    if (moveKeys.length > 0) {
      let showColumns = [];
      for (let i = 0; i < moveKeys.length; i++) {
        showColumns = tableColumn.map((item, idx) => {
          tableColumn.filter((item) =>
            nextTargetKeys.includes(item.key) === true
              ? (item.show = false)
              : (item.show = true)
          );
          return item;
        });
      }
      setTableShowColumns(showColumns);
    }
  };
  const onSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
    setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
  };
  const onScroll = (direction, e) => {};
  //로컬스토리지에 있는 수정된 필드값들을 parse해서 가져오는 함수
  //props로 전달된 column의 값들에게 key,numkey,show키,값을 부여해준다.
  //table 초기값 || filtered
  useEffect(() => {
    let localStorageColumn = [];
    try {
      localStorageColumn = JSON.parse(localStorage.getItem('feedStatus'));
    } catch (e) {
      localStorageColumn = props?.columns;
    }
    //props 컬럼에게 필요한 키,값을 할당해준다.
    let viewColumn = props.columns.map((item, idx) => {
      if (item.show === undefined) {
        item.key = item.dataIndex;
        item.numkey = idx;
        item.show = true;
      }
      let filteredShow = localStorageColumn.filter(
        (word) => word.numkey === idx
      );
      item.show = filteredShow[0]?.show ?? true;
      return item;
    });
    //좌측 수정된 부분과 우측으로 전달된 부분을 나눠서 할당해준다.
    let editColumn = viewColumn.filter((item) => item.show === true);
    let falseColumn = viewColumn.filter((item) => item.show === false);
    setTargetKeys(falseColumn.map((item) => item.key));
    setIstarget(falseColumn.map((item) => item.key));
    setTableShowColumn(editColumn);
    setTableColumn(viewColumn);
    localStorage.setItem('feedStatus', JSON.stringify(viewColumn));
  }, [props.columns]);
 
 <Transfer
          dataSource={tableColumn}
          titles={['선택된 필드', '제외 필드']}
          targetKeys={targetKeys}
          selectedKeys={selectedKeys}
          onChange={onChange}
          onSelectChange={onSelectChange}
          onScroll={onScroll}
          render={(item) => (
            <span>
              {item.title}
              {/* <button>Up</button> <button>down</button>> */}
            </span>
          )}
        />

 

column에는 전체 값이 들어가고
targetkey를 기준으로 좌측 우측을 판단한다.