react 프로젝트 4 (issue history)

1. 데이터 세분화

총 네개의 각자 다른 api를 불러와서 하나의 데이터로 합쳤을때 각자 객체의 속성값이 다르게 나와서 이 데이터들을 활용하는 것에 어려움이 있었습니다. 

1)  먼저 모든 데이터에는 주소가 존재했기에 주소를 통한 filter처리를 먼저 해주었습니다. 서구,중구 등 셀렉트 요소를 사용하며 셀렉트가 될때

  const handleSearchGu = (e) => {
    console.log(recentItems);
    const inputText = e.target.value.trim();
    // localStorage.setItem("selectedOption", inputText);
    setChooseGu(locatoinList[inputText]);

    const filteredData =
      inputText === "구전체" || null
        ? [...recentItems]
        : recentItems.filter((a) => {
            return Object.values(a).some(
              (val) => typeof val === "string" && val.includes(inputText)
            );
          });
    setData1(filteredData);
    setData2(filteredData);
    setCurrentPage(1);
  };

filter가 적용되게 함수를 작성하였고 구를 눌렀을때 동이 구에 맞는 동이 나와야 하기 때문에     setChooseGu(locatoinList[inputText]); 처럼  setChooseGu에 할당해주었고

이어서 동을 선택했을때 

const handleSearchDong = (e) => {
    const inputText2 = e.target.value.trim();

    setData1(
      inputText2 === "전체" || null
        ? [...data2]
        : data2.filter((a) => {
            return Object.values(a).some(
              (val) => typeof val === "string" && val.includes(inputText2)
            );
          })
    );
    setCurrentPage(1);
  };

구의 정보만 담긴 데이터를 한번 더 동을 나눌 수 있었습니다.

 

setData1 에 담긴 data1을 사용하여 네개의 컴포넌트로 나누는 작업을 했고 새로운 배열을 만들어 useState 를 사용해 컴포넌트에 각 네개의 props로 넣어줬습니다.

 

2. useState에 빈 배열 문제

setData1에 담긴 data1의 데이터를 바로 분리하는 작업을 코드로 작성했습니다.

    const newDataF = [];
    const newDataT = [];
    const newDataR = [];
    const newDataS = [];
    
    data1.forEach((data) => {
      if (data.restrntNm) {
        newDataF.push(data);
      } else if (data.tourspotNm) {
        newDataT.push(data);
      } else if (data.romsNm) {
        newDataR.push(data);
      } else if (data.shppgNm) {
        newDataS.push(data);
      }
    });
    setDataF(newDataF);
    setDataT(newDataT);
    setDataR(newDataR);
    setDataS(newDataS);

 하지만 forEach문의 오류와 onChange 함수의 한 타이밍 씩 느리게 적용이 되는 이슈가 있었습니다. 

또한 data1의 첫 로그를 확인해봤을때 빈 배열임을 알 수 있었습니다.

이 오류는 useState에 데이터를 업데이트를 해주고 바로 실행이 되게 작성하였지만 데이터가 들어가기 전의 데이터가 입력되는 것을 알 수 있었습니다.  useState를 비동기가 아닌 동기적으로 사용하기 위해선 useEffect을 사용하는 방법이였습니다.

  useEffect(() => {
    console.log(data1);
    const newDataF = [];
    const newDataT = [];
    const newDataR = [];
    const newDataS = [];

    data1.forEach((data) => {
      if (data.restrntNm) {
        newDataF.push(data);
      } else if (data.tourspotNm) {
        newDataT.push(data);
      } else if (data.romsNm) {
        newDataR.push(data);
      } else if (data.shppgNm) {
        newDataS.push(data);
      }
    });
    setDataF(newDataF);
    setDataT(newDataT);
    setDataR(newDataR);
    setDataS(newDataS);
  }, [data1]);

data1의 데이터가 업데이트될 때 마다 실행이 가능하도록 작성하였지만 

Cannot read properties of undefined (reading 'forEach')라는 오류가 계속 발생했습니다.

저는 data1의 값이 없어서 forEach 문이 작동되지 않는다고 파악했고 로그를 다시 확인해봤지만 역시나 빈배열이였습니다.

그래서 이 함수 안에 data1이 없다면 반환하는 if문을 넣어서 해결 했습니다.

  useEffect(() => {
    console.log(data1);
    if (!data1) {
      return console.log("데이터가 없음");
    }
    const newDataF = [];
    const newDataT = [];
    const newDataR = [];
    const newDataS = [];
...

if 문으로 data1 배열이 비어 있는 경우를 처리해줌으로써 이러한 오류를 방지할 수 있었습니다.