중복 확인하고 로컬 스토리지에 저장하기 with some method

dev_sang·2022년 8월 2일
0

저장하기 버튼 누르면 중복 확인하고 로컬 스토리지에 저장하기
some 메서드 활용

로직

클릭 a
   배열에 a가 있는 지 확인 
      없음 - 해당 데이터 a 를 배열에 넣음 
클릭 b
   배열에 a가 있는 지 확인 
      없음 - b를 배열에 넣음
클릭 a (중복)
   배열에 a가 있는 지 확인 
      있음 - return;  

Card 컴포넌트
-> 부모컴포넌트로부터 data를 프롭스로 받아옴

let BookedHotels: Hotel[] = []; // 배열

const Card = ({ data }: PropsType) => {
  
  const HandleClickReserve = (newData: Hotel) => {
    
    let isExisting = BookedHotels.some(
      (data) => data.hotel_name === newData.hotel_name
    ); // 중복이면 true 반환 
    
    if (isExisting) {
      alert('이미 저장된 호텔입니다.');
      return;
    }
    if (!isExisting) {
      BookedHotels.push(newData);
      localStorage.setItem('hotels', JSON.stringify(BookedHotels));
    }
  };

  return (
    <div key={data.hotel_name} className='CardContainer'>
      <section className='cardLeft'>
        <div className='imgWrapper'>
          <img src={IMAGE_URL} alt='hotel_image' />
        </div>
        <div className='hotelInfo'>
          <h2>{data.hotel_name}</h2>
          <p>{data.address}</p>
          <p>기본 인원: {data.occupancy.base}</p>
          <p>최대 인원: {data.occupancy.max}</p>
          <div className='ratingReview'>
            <span>평점: {data.rating} / 5 </span>
            <span>{data.review} 건의 리뷰</span>
          </div>
        </div>
      </section>
      <section className='cardRight'>
        <p>{data.price}</p>
        <p className='tax'>세금 및 수수료 불포함</p>
        <button onClick={() => HandleClickReserve(data)}>예약 하기</button>
      </section>
    </div>
  );
};
profile
There is no reason for not trying.

0개의 댓글