리액트

우연히 글을 보다가 트리 구조의 메뉴를 만드는 것을 보고 나중에 참고할 수 있을 것 같아서 글을 쓴다.1. react-arborist 맛보기1) 설치하기npm install react-arborist2) 데이터 셋팅export const data = [ { id: "1", name: "public", children: [{ id: "c1-1", name: "index.html" }] }, { id: "2", name: "src", children: [ { id: "c2-1", name: "App.js" }, { id: "c2-2", name: "index.js" }, { id: "c2-3", name: "styles.css" } ] ..

react로 이미지 슬라이드를 쉽게 구현하고자 한다.✍🏻 기술스택 : React, tailwind.css나의 경우 두가지 경우로 구현하였다.1. animation을 이용하여 구현하기작동 방식보여주고 싶은 카드들의 배열을 만들고, 이를 복제하여 나타낸 뒤 번갈아 가며 보여주는 방식이다. 내가 만들고자 하는 컴포넌트들의 컨테이너를 배너라고 칭한다.[원본 배너]- 원본 배너와 복제 배너를 한 방향으로 이동시켜주는 애니메이션을 실행시킨다-  원본 배너가 배너 너비만큼 이동하면, 복제 배너의 뒤로 이동시킨다.-  원본 배너는 다시 배너 너비만큼 이동한다.[복제 배너]-  복제배너는 일정 방향으로 배너크기의 2배만큼 이동시켜주면 된다.-  사용자는 마치 하나의 배너가 무한으로 렌더링되는 것처럼 보인다..-  사실..

Toast토스트 메시지란 사용자에게 간단한 정보를 잠깐 보여주는 UI 요소이다. 화면의 특정 위치에서 떠오르고, 일정 시간이 지나면 사라진다.→ 이를 사용하게 된 계기는 alert창을 쓰다가 단조로워서 바꿀까하다가 우연히 보게 참고 사이트 글을 보게 되어 사용하게 되면서 글을 쓰게 되었다.react-hot-toast 사용하기1) 패키지 설치하기npm i react-hot-toast2) 앱에 toaster 넣기import toast, { Toaster } from 'react-hot-toast';해당 패키지를 설치했으니, 이를 가져온다.const App = () => { return ( Make me a toast );};toast를 쓰기 위해서 Toaster를 앱에 맨 위..

사람은 역시 공부해야 하는 동물이구나 느끼면서 글을 작성하고자 한다.styled-resetstyled-reset은 브라우저의 기본 스타일을 리셋시켜주는 node.js 패키지이다. 내가 css를 적용할려고 했는데 브라우저에 기본적으로 적용되어 있는 스타일 때문에 적용이 안 된 경우를 많이 보았을 것이다. 그 때 reset을 시켜줘야 하는데, 구글에 쳐봤을 때 리셋시켜주는 코드를 쉽게 구할 수 있다.그러나, react에서 reset시켜주는 라이브러리가 존재한다. 이를 쓰면 원하는 스타일링을 하기 앞서 기본 세팅을 리셋해주는 것이 좋다. 또한 styled-reset을 시켜주는 가장 큰 이유는 크로스 브라우징 때문이다. ✅ 브라우저마다 HTML 시맨틱 태그에 대한 기본값의 차이를 없애주기 위함이다.styled-..

설치하기npm install react-modal위와 같이 설치했는데 오류가 걸리는 경우가 존재한다. 내가 그랬기 때문이다.npm i --save-dev @types/react-modal타입 정의 라이브러리를 사용하면 오류가 나지 않는다.import하기import Modal from 'react-modal';import를 해주고 modal을 사용해주면 된다.useState 셋팅해주기나의 경우에 button을 클릭했을 때 modal을 보여주게 하고 싶기에 변수를 button과 modal을 연결해놓으면 된다.import React, { useState } from 'react';import Modal from 'react-modal';function App() { const [modalIsOpen, set..

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..