728x90 전체 글66 자바스크립트 씹어먹기 2022. 9. 27. React-responsive mideaQuery 반응형 적용해보기 CSS mideaQuery를 사용하는 방법도 있지만, react-responsive 패키지를 통해 구현하는 방법이 있어서 적용해봤다. 패키지 설치 yarn add react-responsive useMediaQuery 세팅 // useMideaQuery.js import { useMediaQuery } from "react-responsive"; export const Desktop = ({ children }) => { const isDesktop = useMediaQuery({ minWidth: 481, }); return isDesktop ? children : null; }; export const Mobile = ({ children }) => { const isMobile = useMediaQ.. 2022. 9. 26. React 카카오맵 API 사용해보기 그냥 카카오 맵 API를 사용해도 되지만 나는 모달로 만들어 사용하는 법을 선택했다. 라이브러리 없이 모달 창 만들기 https://hanbbistory.tistory.com/61 React 라이브러리 없이 모달창 만들기 모달창은 어떻게든 사용되기에 라이브러리 없이 만들어봤다. // 모달 버튼이 있는 페이지 // ModalTest.jsx import ModalPage from "./ModalPage"; import { useState } from "react"; export default function Mo.. hanbbistory.tistory.com 우선 카카오 API 키를 받아와야한다. https://apis.map.kakao.com/ 위 화면의 오른쪽 위에 App key 발급을 눌러주면 로그인 .. 2022. 9. 24. React 무한스크롤 만들어보기 개발공부를 하다보니 무한스크롤을 사용하는 웹사이트를 들어가면 기능이나 사용감을 생각해보게 된다. 데이터를 효율적으로 처리하는 방법 중 하나라고는 하지만 사용자 입장에서도 부드러운 사용감이 생기지 않나 싶다. 간단하게 패키지 하나를 설치하고 시작해보겠다. yarn add react-intersection-observer 이름 그대로 요소를 관찰해주는 친구다 (target element or element의 부모 or 뷰포트가 교차하는 부분 등 관찰) -- 글작성 페이지 생략 -- // 데이터가 있다고 가정했을때 // TestInfi.jsx import { useEffect, useState, useRef, useCallback } from "react"; import { useInView } from "r.. 2022. 9. 20. React 라이브러리 없이 모달창 만들기 모달창은 어떻게든 사용되기에 라이브러리 없이 만들어봤다. // 모달 버튼이 있는 페이지 // ModalTest.jsx import ModalPage from "./ModalPage"; import { useState } from "react"; export default function ModalTest() { // 모달을 보여줄지 말지 상태를 관리하는 state를 만들어준다. const [showModal, setShowModal] = useState(false); // 모달 버튼을 클릭하면 열리고 const openModal = () => { setShowModal(true); }; // 활성화된 모달창 밖을 클릭하면 닫힌다. const closeModal = () => { setShowModal(f.. 2022. 9. 17. 이전 1 ··· 6 7 8 9 10 11 12 ··· 14 다음 728x90
