React ) 엑셀 json변환, map(), filter()

(목적)

전에 코생아 시절 ,, 리스트로 모두 html파일에 적어서 만들어 본 적이 있다.

하지만 데이터를 추가하는일이 너무 힘들었고 웹이 너무 무거워진것 같아 오랜만에 다시 만들어 보려 한다.

엑셀로 리스트를 정리해서 json 파일로 변환하여 react로 필터링 하여 보여주는 페이지를 만들려고 함.

필터링이 된다면 카카오api도 다시 사용하여 지역을 선택하면 지도가 뜨도록 해볼생각이다.

 

** 1-2일차 **

(엑셀)

그때마다 가고 싶은 카페 느낌? 이 다르기 때문에 테마별로 정리하고 off날과 주차여부를 정리해 보았고, json파일은 사이트에서 무료로 변환할 수 있어서 어렵지 않다. 그냥 엑셀.xlsx 형식으로 저장해서 업로드하면 파일이 추출된다.

 => 변환사이트 : https://products.aspose.app/cells/ko/conversion/excel-to-json

프레임워크는 react를 사용하기로 했다.

아직 미숙하지만 만들어가며 배우기로 한다.

일단 map()함수를 이용해 뿌려주었다.

이제 카테고리별로 필터링이 되도록 만드는게 목적이다.. 

(참고사이트: https://splopsky.tistory.com/48 ) 이 사이트를 보고 적용해보았다.

하지만 내 플젝에서는 자꾸 Uncaught TypeError: this.setstate is not a function 에러가 떠서 참고사이트 코드를 긁어서 select를 만들어서 해보았지만 잘 안된다.. 

 

이제 보니 저 사이트는 index.js에서 나는 app.js에서 하고 있어서 

class App extends Component {

  constructor() {

    super();

    this.state = {

      search: null,

    };

  } 

 

변경 이벤트핸들러에서 this.setstate가 안먹혀서 원래 사용하던데로 func App 사용하여 usestate객체를 만들어 사용했다.

이벤트 핸들러에 set함수들을 각각 주어서 잘 되었지만 다시 초기값으로 돌아갈땐 안나온다..

function App() {

  const [selectArea, setArea] = useState("");

  const [selectTh, settheme] = useState("");

const items = CafeInfo.filter((data) => {

    if (selectArea == null && selectTh == null) return data;

    else if (data.area.includes(selectArea) && data.theme.includes(selectTh)) {

      return data;

    }

  }).map((data, index) => {

    return ( ''''''''');

});

return (

<div className="selectBOx">

        <AreaSelect

          options={AREA}

          defaultValue="null"

          onChange={(e) => setArea(e.target.value)}

        ></AreaSelect>

        <ThemeSelect

          options={THEME}

          defaultValue="null"

          onChange={(e) => settheme(e.target.value)}

        ></ThemeSelect>

      </div>

      <div className="card_list">{items}</div>

);

}

테마도 선택하면 잘 필터링이 된다!!

 

다음 포스팅:

필터링시 지도 api 추가