티빙 홈페이지 배너는 가만히 있으면 이미지가 다음으로 넘어가는 슬라이드 형식의 배너입니다. 위와 같은 기능을 리액트에서 구현하기 위해 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..