visualizer 구현

localstrage는 아닌듯..

localstorage를 이용하니 다른 문제가 있었다.
conponentWillUnmount에서 localstorage 값을 지워버리니
main페이지로 빠졌다가 다시 뒤로가기를 누르면 localstorage 값이 없어 에러가 발생했다.

그렇다고 이 값을 계속 기억해두자니 좋지 못한 방향같았다.
생각해보니 예민한 데이터는 localstrage에 저장하면 좋지 않다해서 localstorage를 포기하기로 했다.

우리 프로젝트에서는 검색 기능에서 uri에 params값을 줘서 기억해야할 값을 기억해준다.

이를 활용하기로 하였다.

this.trackId = this.props.loca.pathname.split('/')[2];

우선 params에는 track의 id값을 넣어주고 visualizer 컴포넌트에서는 uselocation을 이용했다.

useLocation은 함수 컴포넌트 전용 react hooks다.
이를 class 컴포넌트에서 사용하기 위해서는 withRouter를 이용하거나
props로 해당 useLocation 객체를 받아오는 두 가지 방법이 있다고 한다.
App컴포넌트에서 useLocation을 생성하니 이 값을 props로 내려주는게 더 간단한듯 하여
props로 받는 방법을 채택했다.

그리고 visualizer 컴포넌트 constructor에서 props로 받은
useLocation값을 이용해 uri의 params값을 변수에 저장시키고,
이를 componentDidMount에서 axios 요청을 보내도록 하였다.
받아온 데이터를 state에 각각 적용시켜줬다.