캐러셀(Carousel) 이란? 캐러셀은 회전목마라는 뜻인데요, 쉽게말해서 슬라이드라고 생각하시면 됩니다. 티빙, 넷플릭스 같은 곳과 핸드폰 화면에서 많이 쓰입니다. Swiper.js를 사용하는 이유? 이전까지는 Framer-motion으로 수동으로 캐러셀을 만들었습니다. 애니메이션을 넣는 것도 여간 힘든일이 아니지만, 제일 큰 이유는 Pagination을 구현하기 위함입니다 수동으로 만들 땐 Pagination 기능을 만들 순 있어도, 애니메이션을 구현하는 것은 굉장히 복잡합니다. (적어도 저는 복잡했습니다..) 슬라이드를 한 장 넘길때의 애니메이션을 구현, 두 장 넘길 때의 애니메이션 구현, … 원하는 만큼의 애니메이션을 각각 구현해야 합니다. (저의 지식에서는 이렇게 하는게 최선이라 생각이 되네요...
티빙 홈페이지 배너는 가만히 있으면 이미지가 다음으로 넘어가는 슬라이드 형식의 배너입니다. 위와 같은 기능을 리액트에서 구현하기 위해 setInterval 사용하는 법을 알아보겠습니다 리액트에서 setInterval()함수 사용하는 법 리액트에서 setInterval()을 사용하기 위해선 useEffect를 사용하면 됩니다. function HomeBanner({ backScreenData }: { backScreenData: ITrending[] }) { const [order, setOrder] = useState(1); const [isPlay, setIsPlay] = useState(true); const handleAfterClick = () => { setOrder((prev) => (prev..
위와 같은 기능을 구현하기 위해서 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) => (..
일단 결론적으로 말하면 CRA에 .env가 내장되어 있어 따로 설치가 필요없습니다. .env 파일을 생성한다. pakage.json과 같은 위치에 생성. (변수명) = (변수값) 을 지정하는 데, 변수명 앞에 REACT_APP 을 붙여준다! REACT_APP_API_KEY = "rqe5rqerqerqereqreqrq" //이런식으로 적어준다. 사용할 땐 process.env.REACT_APP_API_KEY로 사용하면 완료. 이 글을 적는 이유는 CRA 환경에서 처음 .env를 사용해 봐서 생각없이 npm i dotenv 설치하고 import 해서 사용하니 오류가 뜨더라. 무슨 이유인지 도통 모르겠어서 열심히 검색해본 결과 새로 설치하면 기존 버전과 달라서 그런지 웹팩 폴리필 설정을 새로 해주어야한다.. ..
input을 생성여부를 결정하는 State를 이용해서, input요소를 생성함과 동시에 요소를 focus하는 동작을 만들려고 합니다. react-hook-form을 이용하여 form을 만들어 주고. useRef() 훅을 이용하여 input을 지정한 다음, focus해주는 방식을 생각했습니다. 이 방법으로 해본 결과, focus는 정상적으로 작동하지만, form이 제출되지 않는 현상 const [isAddBox, setIsAddBox] = useState(false); const inputRef = useRef(null); const handleAdd = () => { setIsAddBox(true); }; const handleBlur = () => { setIsAddBox(false); }; useEf..
여러 아이콘을 사용할 수 있는 대표적인 서비스인 Font Awesome을 리액트에서 사용하는 법입니다. 1. Set Up with React 2. Add Icons with React Add Icons with React The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com 자세한 내용은 위의 링크에서 확인할 수 있습니다. 저는 위 방법을 그대로 따라해 보겠습니다. npm i --save @fortawesome/fontawesome-svg-core npm i --save @fortawe..