React

리액트에는 react-calendar와 react-datepicker등으로 캘린더를 구현할 수 있다.설치npm i react-calendarimport하기import Calendar from 'react-calendar';import 'react-calendar/dist/Calendar.css'; // css importreact-calendar를 설치하고 import해준다.아래의 css는 react-calendar에서 기본적으로 제공해주는 css파일이다.표시하기 위와 같이 했으면 Calendar를 가져와서 표시해주면 캘린더가 보이게 된다.하지만, 캘린더를 클릭시 내가 클릭한 날짜를 보여주게 해주고 싶으면 아래와 같이 코드를 추가해주면 된다.npm i moment우선, moment를 설치해준다...

1. 필요한 패키지 설치하기 npx create-react-app {app 이름} 새로운 react app을 생성하도록 한다. npm install --save styled-components npm install --save styled-reset npm install --save react-router-dom npm install react-icons styled-components : createGlobalStyle를 사용하기 위해 설치해준다. createGlobalStyle : 글로벌 스타일 적용을 도와주는 styled-components내장 메서드이다. styled-reset : styled-components와 연결되어, 여러 브라우저마다 기본적으로 설치되어 있는 스타일을 지워주는 Node.j..

💡 https://velog.io/@yiyb0603/React에서-무한스크롤-구현하기-8rdmbhtj 위의 사이트를 따라하며 쓴 글입니다. 1. 파일 생성 및 코드 작성하기 임의의 폴더를 만들어 파일을 생성한다. InfiniteScroll.js을 만들어준다. InfiniteScroll.js import React, { useState, useCallback, useEffect } from 'react'; import { getPostList } from './postList'; const InfiniteScroll = () => { const [page, setPage] = useState(1); const [posts, setPosts] = useState(getPostList(1)); return (..

지금 작성하는 Scroll Progressbar는 아래의 사이트를 따라하여 만들었습니다. 💡 https://velog.io/@yiyb0603/React에서-Scroll-Progressbar-만들어보기 1. 컴포넌트 생성하기 components라는 폴더를 만들어, ScrollProgress파일을 만들어 이곳에서 progressbar를 만들어줄 것이다. 그에 대한 style을 css파일 넣어 따로 관리해준다. 2. 기본 셋팅하기 1) components/ScrollProgress.js import React, { useState, useCallback, useEffect, useRef, MouseEvent, } from "react"; import "./ScrollProgress.css"; const Scr..

검색 기능은 한번도 구현해본 적이 없는데 우연히 어떤 글을 보다가 따라하게 되었다. 색깔 배열 우선은 검색 기능을 구현하려면 검색할 대상이 있어야 하기 때문에 배열을 만들어 색깔 목록을 만들어주었다. const colorList = ["red", "orange", "yellow", "green", "blue", "purple"]; 색깔 목록을 만들어서 div태그로 보여주고자 한다. 컬러 목록 보여주기 ColorData.js import React, { useState } from "react"; function ColorData() { const colorList = ["red", "orange", "yellow", "green", "blue", "purple"]; return ( {colorList.m..

🤔 문제 발생 console.log(data); 위와 같은 코드를 쳤을 때 콘솔에 두개로 출력이 되었다. 😶‍🌫️ 문제 해결 이러한 현상은 StrictMode 때문이다. React로 만든 파일에 들어가면 index.js 파일이 존재한다. 아래는 index.js 파일이다. // index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); roo..

글을 쓰다가 글의 길이 길어져 활용하는 부분은 다른 페이지로 만들어 작성하고자 한다. SWR 활용하기 우선은 파일을 새로 만든다. 아래의 코드를 작성하여 새로운 react 파일을 만든다. npx crate-react-app {생성하고자 하는 파일 이름} 폴더 셋팅 위와 같이 폴더를 셋팅하였다. pages/Main.js import React from "react"; const Main = () => { return Main; }; export default Main; pages/Detail.js import React from "react"; const **Detail** = () => { return **Detail**; }; export default **Detail**; pages/index.js ..

개념 SWR은 vercel에서 제작한 모듈이며, 데이터를 가져올 때 쓰인다. vercel의 SWR 공식문서 "SWR"이라는 이름은 HTTP RFC 5861(opens in a new tab)에 의해 알려진 HTTP 캐시 무효 전략인 stale-while-revalidate에서 유래되었습니다. SWR은 먼저 캐시(스태일)로부터 데이터를 반환한 후, fetch 요청(재검증)을 하고, 최종적으로 최신화된 데이터를 가져오는 전략입니다. SWR을 사용하면 컴포넌트는 지속적이며 자동으로 데이터 업데이트 스트림을 받게 됩니다.그리고 UI는 항상 빠르고 반응적입니다. 장점 단 한 줄의 코드로 프로젝트 내의 데이터 가져오기 로직을 단순화할 수 있다. 빠르고, 가볍고, 재사용 가능한 데이터 가져오기 내장된 캐시 및 요청 ..