이슈1. 이전 data 참조 오류

• Tab 이동 부분을 잘못 짠건지

• useEffect 부분을 잘못 짠건지
• return통한 뒷정리 함수

• 애초에 columns 속성에서 rowData를 받아 리턴해주는 접근에 문제가 있는 것인지..

[에러 발생 상황]

• 1) 메인페이지에서 여러 종류의 <DataTable /> 을 Tab 형식으로 제공 중

• 2) 모든기능테이블 → 검색필터 가능 테이블 → 모든 기능 테이블 을 클릭하여 렌더링하고자 할 떄, 검색필터 가능 테이블 → 모든기능 테이블 에서 모든 기능 테이블 렌더링 과정중 에러 발생

[ 에러 원인 분석 ]

• 1) DataTable의 각 cell의 내용을 처리하는 부분 중, col.flatList(…) 에서 오류 발생

const content = (col.flatList && col.flatList(rowData)) 
                 || String(col.selector(rowData));

• 2) col.flatList
• <DataTable data={data} columns={columns} /> 에서 props로 받아오는 columns 중, 배열형식의 값이 존재하는 경우, 이를 포맷팅한 값을 리턴해주는 함수 columns의 각 data에서 optional(배열일 경우에만)로 flatList를 가지도록 함.
ex

• 일반적인 columns

// 일반적인 columns
[{
    label: "Title",
    key: "title",
    selector: (row: Data) => row.title,
    sortable: true,
  },
  {
    label: "Director",
    key: "director",
    selector: (row: Data) => row.director,
    sortable: true,
  }, ... ]

• 배열 형식을 가지는 Genres의 column data

{
    label: "Genres",
    key: "genres",
    selector: (row: Data) => row.genres,
    flatList: (row: Data) => {
      return (row.genres as string[]).map(
        (genre: string, i: number, total: string[]) => (
          <span key={i}>
            {genre}
            {i < total.length - 1 && ", "}
          </span>
        )
      );
    },
    sortable: true,
  },

• 3) 다시 문제 상황 돌아가기
• 3.1) 첫 DataTable 렌더링 (모든기능테이블: <DataTable data={movies} … />)
현재 이상 없음





• 3.2) 탭 이동 (필터가능테이블: <DataTable data={desserts} … />)
• 탭 이동 시 dataTable이 두 번 렌더링 됨
• 첫 번째 (prop data는 바뀐 data지만, tData는 이전의 movies를 가르키는 원하지 않는 상황)
• 두 번째 (prop data와 tData 가 일치하는 원하는 상황)
 

문제 상황 || 수상한 점은 발생했지만, 아직 오류는 발생하지 않음

 
• 수상한 점 발생( 내가 모르는 지점 )
• tData가 이전 데이터를 갖는게 당연한건가?
• 영향을 주지 않으려면 어디서 어떻게 control 해야하지?
• useEffect의 뒷정리함수로 tData를 null 로 초기화해주어야 하나?
문제상황) 탭이동 후 첫 번째 렌더링 중에서 tData가 이전의 data를 가지고 있음



• UI 이상 없음

 
• 3.3) 다시 다른 탭 이동 (모든기능테이블: <DataTable data={movies} … />)
• 에러 발생
• data와 colums는 movie관련 데이터로 update 되었지만, tData는 update되지 않은 디저트 데이터(desserts)를 가리키고 있음
• 두번의 렌더링 중 첫번째 렌더링 상황에서
• tData.map(()⇒ (columns.map() ⇒ return <></> ))
• 이중 반복을 통해 Table을 채워나가는데, TData는 desserts데이터를, colums는 movie데이터를 가지고 있기 때문에, 최종적으로 col.flatList(rowData) 에서 배열이 아닌 dessert값에 접근하게 되어 에러 발생
• 에러발생

[ 해결 시도 ]

• DataTable의 useEffect의 뒷정리 함수로 TData를 빈배열로 만들어주면, 이전 data를 가지고 있지 않기 때문에 처리 될 수 있지 않을까?

• data가 바뀌기 직전에, tData를 null 로 바꾸어준다.

useEffect(() => {
		setTData(data);
    return () => {
      console.log("뒷정리", data, tData);
      setTData(null);
    };
  }, [data]);

• 결과
원하는 동작
• data가 바뀌기 직전 tData를 null로 바꾸어줌
• 첫 렌더링 시 tData가 Null이기 때문에, null 이 아닐 때에만 렌더링 하도록 해줌
• 첫 렌더링을 무사히 넘기고, 원하는 상황인 두번째 렌더링이 일어나면서 문제해결
실제동작
• 그대로 이전 data가 tData에 들어와서, 변경사항 존재 x

• 우선 해결이 어려워, col.flatList를 주석처리하고 사용하지 않는 중..