React(67) react-cookie 로 저장된 쿠키값 가져오기

 

웹 사이트 상단에 얇은 띠배너가 있다. 그로인해 레이아웃의 height 가 영향을 받았다.

띠배너를 삭제했을 때 이미 저장된 쿠키값을 가져와서 height 를 동적으로 주려고 한다.

 

자, 서론은 여기까지 하고 react-cookie 를 사용하여 쿠키값을 불러와보자 

 

---

React(67) react-cookie 로 저장된 쿠키값 가져오기

 

Banner.tsx

배너가 들어있는 배너 컴포넌트에서는 쿠키 키가 선언되어 [배너 닫기] 버튼을 누르면

'hiddenBanner' 라는 쿠키값이 저장된다. (쿠키값을 저장하는 과정은 생략하겠다.)

const COOKIE_KEY = 'hiddenBanner';
.
.
.
// [배너 닫기] 버튼을 클릭시 위의 쿠키키가 추가됨

 

** hoxy 쿠키값 세팅하는 과정이 궁금하시다면? (더보기 링크 클릭)

쿠키 세팅 과정을 정리한 포스팅입니다. 필요하시다면 확인해보시길 :) 

React(66) react-cookie 로 1회성 모달 만들기

 

 

Main.tsx

이제 메인페이지에서 배너의 쿠키값을 가져와보자

일단 임포트 해주자.

import { useCookies } from 'react-cookie';
import Banner from 'components/Banner'; // 쿠키값이 들어있는 배너 컴포넌트 임포트

 

Banner 컴포넌트에서 가져온 쿠키값을 여기서 사용할 수 있게 준비를 좀 해주자.

const [isBanner, setIsBanner] = useState<boolean>(false); // 배너 유무에 따른 스위치 역할을 함
const [bannerCookie] = useCookies([Banner.COOKIE_KEY]); // Banner 컴포넌트에서 쿠키값를 가져오자

 

그리고 useEffect 를 사용해 쿠키값이 변할 때마다 배너 유무를 알려주는 스위치(isBanner)를 껏다켯다 해주자

// [배너 닫기] 를 눌러 배너가 사라지면 쿠기 값이 생긴다. 즉 쿠키값은 존재하므로 true 가 된다.
// 그래서 이를 이용해 useEffect 문에서는 조건을 반대로 주었다.

useEffect(() => {
    if (bannerCookie) {   // 쿠키값이 존재할경우 (즉, 배너가 없을 경우)
      setIsBanner(false); // 배너변수 스위치를 off 해주자 
    } else { 		  // 쿠키가 존재하지 않으면 (즉, 배너가 있을 경우)
      setIsBanner(true);  // 배너변수 스위치를 on 해주자 
    }
  }, [bannerCookie]);     // 쿠키값 상태에 따라 렌더링이 된다.

 

스타일드 컴포넌트를 사용해 isBanner 라는 스위치역할을 하는 변수를 props로 넣어준다.

(스타일드 컴포넌트 세팅과정은 생략하겠다)

 <Styled_Main_Content isBanner={isBanner}> // 여기에 css 인자로 넣어줄거다.
 .
 .
 Main 컴포넌트 html 코드 (생략)
 .
 .
 </Styled_Main_Content>

 

변수값에 따라 height 를 동적으로 변경해주자.

const Styled_Main_Content = styled.div<{ isBanner: boolean }>` // props로 css 안에 넣어주고 
  width: 100%;
  height: ${({ isBanner }) => (
    isTopBanner ? '172px' : '122px')  	// props 변수값에 따라 높이는 변한다
  };
}