[React] SWR이 무엇인가요?

우선 SWR을 알아보기 앞서 캐시에 대해서 알아보겠습니다. ❓캐시란 무엇인가 캐시는 데이터를 일시적으로 저장하는 메모리를 가리키는 용어입니다. 한 번의 요청에 비용이 큰 경우, 여러 번 요청을 하는 것 보다, 한 번의 요청 이후 캐시에 저장하여 재사용 하기 위한 전략입니다. ❓SWR이 무엇인가 SWR은 Stale-While-Revalidate의 약자로 HTTP 캐시 무효 전략을 뜻합니다. SWR은 우선적으로 캐시로 부터 데이터를 반환한 후, fetch 요청(Revalidate)이 필요한지 확인하고 요청을 합니다. 즉 캐시에 있는 데이터로 처리할 수 있다면, 굳이 요청을 하지 않는 것이죠. 그리고 반대로 사용자가 원하는 순간에 요청을 보내 새로 데이터를 받을 수 있습니다. 이를 통해 컴포넌트는 지속적으로 ..

• format_list_bulleted 개발관련/React
• · 2023. 11. 24.
• textsms

[React] State가 변경 되었는데, 재 렌더링이 안된다면?

useState를 잘못 사용하여 재 렌더링이 되지 않는 상황을 마주쳤습니다. 기본적인 부분이라고 생각하지만, 저와 같은 실수를 하시는 분이 있으실 수 있어 블로그 포스팅을 해봅니다! ❓React 요소가 재 렌더링 되는 시점? 기본적으로 React의 요소가 재 렌더링 되는 경우는 다음과 같습니다. State가 변경되었을 때 Props가 변경 되었을 때 부모 컴포넌트가 재 렌더링 될 때 컨텍스트(useContext 훅을 사용하여)에 의존하고 있는 경우 컨텍스트 값이 변경될 때 네 가지 상황에서 재 렌더링이 실행됩니다. 그런데 제가 마주친 상황은 State가 변경되었음에도, 재 렌더링이 되지 않는 상황이었습니다. //... const [files, setFiles] = useState([]); const in..

• format_list_bulleted 개발관련/React
• · 2023. 11. 18.
• textsms

React Swiper.js Swiper 컴포넌트 바깥에서 useSwiper()훅 사용하는 법

Swiper useSwiper()훅 useSwiper()훅은 Swiper 컴포넌트 내부에서 사용할 수 있는 훅으로, Swiper에 관련된 메서드를 제공합니다. 그런데 Swiper 컴포넌트 외부에서는 어떻게 불러올 수 있을까요? 기존 Swiper 컴포넌트 내부에서 사용하는 방법 아래 코드와 같이 버튼 컴포넌트를 하나 만듭니다. 컴포넌트 내부에 useSwiper()훅을 불러와 메서드를 사용한 다음, 버튼 컴포넌트를 Swiper 컴포넌트 내부에 불러옵니다. import { useSwiper } from "swiper/react"; export default function SlideNextButton() { const swiper = useSwiper(); return ( swiper.slideNext()}>..

• format_list_bulleted 개발관련/React
• · 2023. 6. 30.
• textsms

React 에서 Swiper.js를 이용하여 캐러셀 Carousel 만들기 TS JS

캐러셀(Carousel) 이란? 캐러셀은 회전목마라는 뜻인데요, 쉽게말해서 슬라이드라고 생각하시면 됩니다. 티빙, 넷플릭스 같은 곳과 핸드폰 화면에서 많이 쓰입니다. Swiper.js를 사용하는 이유? 이전까지는 Framer-motion으로 수동으로 캐러셀을 만들었습니다. 애니메이션을 넣는 것도 여간 힘든일이 아니지만, 제일 큰 이유는 Pagination을 구현하기 위함입니다 수동으로 만들 땐 Pagination 기능을 만들 순 있어도, 애니메이션을 구현하는 것은 굉장히 복잡합니다. (적어도 저는 복잡했습니다..) 슬라이드를 한 장 넘길때의 애니메이션을 구현, 두 장 넘길 때의 애니메이션 구현, … 원하는 만큼의 애니메이션을 각각 구현해야 합니다. (저의 지식에서는 이렇게 하는게 최선이라 생각이 되네요...

• format_list_bulleted 개발관련/React
• · 2023. 6. 23.
• textsms

React 에서 setInterval 사용하는 법 리액트 JS TS

티빙 홈페이지 배너는 가만히 있으면 이미지가 다음으로 넘어가는 슬라이드 형식의 배너입니다. 위와 같은 기능을 리액트에서 구현하기 위해 setInterval 사용하는 법을 알아보겠습니다 리액트에서 setInterval()함수 사용하는 법 리액트에서 setInterval()을 사용하기 위해선 useEffect를 사용하면 됩니다. function HomeBanner({ backScreenData }: { backScreenData: ITrending[] }) { const [order, setOrder] = useState(1); const [isPlay, setIsPlay] = useState(true); const handleAfterClick = () => { setOrder((prev) => (prev..

• format_list_bulleted 개발관련/React
• · 2023. 6. 23.
• textsms

React 에서 setInterval, timer 사용하는 법 리액트 JS TS

위와 같은 기능을 구현하기 위해서 setInterval()을 사용할 필요가 있었다. 리액트에서 setInterval()을 사용하기 위해선 useEffect를 사용하면 된다. function HomeBanner({ backScreenData }: { backScreenData: ITrending[] }) { const [order, setOrder] = useState(1); const [isPlay, setIsPlay] = useState(true); const handleAfterClick = () => { setOrder((prev) => (prev + 1 === 4 ? 0 : prev + 1)); }; const handleBeforeClick = () => { setOrder((prev) => (..

• format_list_bulleted 개발관련/React
• · 2023. 6. 22.
• textsms