최근 검색 내역 지정된 개수 만큼 보여주기.

 

유저가 항공권 검색을 했을 때,

검색했던 내용을  '최근 검색한 항공권' 에 3개씩 띄워주고 있다. 

 

우선 검색을 눌렀을 때 그 검색에 해당하는 값들을(목적지, 기간, 승객 수, 왕복/편도 ) 오브젝트로 만들어서 로컬스토리지에 저장한다.

그리고 메인화면이 렌더링 되면 그것들을 다시 가져와서 출력해주는 방식으로 구현해 보았다.

 

검색값을 단순히 오브젝트로 저장한 것이 아니라, 배열을 만들고 그 안에 검색을 할 때마다 쌓이게 했다. 

그렇게 함으로서, 배열 length의 인덱스 값을 이용하여 가장 최근 3개 값을 가져올 수 있었다. 

 

  const recentData = JSON.parse(localStorage.getItem('recentData'));
  const newRecentData = [
    ...recentData[recentData.length - 3],

    // recentData[recentData.length - 3],
    // recentData[recentData.length - 2],
    // recentData[recentData.length - 1],
  ];