Carousel 적용하기

Carousel 참고 블로그

https://velog.io/@97godo/React-Hooks%EB%A1%9C-Carousel-%EB%A7%8C%EB%93%A4%EA%B8%B0

---

Router

React.useEffect(() => {
    const Onboarding = localStorage.getItem("onboarding");

    if (!Onboarding) history.replace("/slider");
  }, []);

Route 모여있는 곳에서 useEffect를 실행하여 localStorage에 있는 데이터를 가져온다. 처음 사이트에 접속을 하면 데이터가 없는데 그때 강제로 회원가입을 유도하는 페이지로 redirect 시켜준다.

Slider Component

useEffect(() => {
    const Onboarding = localStorage.getItem("onboarding");

    if (!Onboarding) localStorage.setItem("onboarding", "saw");
  }, []);

useEffect 실행 시 localStorage에서 키값을 가져온다.
원하는 키값이 없으면 setItem(key, value) 형태로 저장할 수 있다.

---

처음 사이트에 접속할 때는 키값이 없어 Slider 컴포넌트를 강제로 렌더링 시켜주는데 Slider에서 useEffect가 실행되어 localStorage에 데이터를 저장하게 된다. 두 번째 접속부터는 데이터가 있기 때문에 Slider 컴포넌트를 보여주는 대신에 로그인을 할 수 있는 페이지를 보여주게 설정했다.

다음에는 swiper 또는 slick 라이브러리를 사용해서 구현해봐도 좋을 것 같다.