React

💡 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는 항상 빠르고 반응적입니다. 장점 단 한 줄의 코드로 프로젝트 내의 데이터 가져오기 로직을 단순화할 수 있다. 빠르고, 가볍고, 재사용 가능한 데이터 가져오기 내장된 캐시 및 요청 ..

: 상태관리 라이브러리redux 등장배경MVC패턴 형식으로 state가 변화되면 Model, View, Controller에 이벤트가 발생하고 값이 변화하는 구조였다. 이를 양방향 데이터 흐름이라고 한다. 이는 복잡하며 데이트 흐름이 한번에 판단하기 힘들다. 이러한 단방향 데이터 흐름이 있다.즉 redux이다. redux는 MVC패턴의 단점을 개선하는 것이 목적이다.리덕스를 사용하면 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있으며, 글로벌 상태 관리를 쉽게 할 수 있다.Redux의 3가지 원칙리덕스 사용을 위해서는 다음의 3가지 원칙을 지켜야 한다.단일 스토어 : 하나의 애플리케이션 내부에는 하나의 스토어를 만들어 사용해야 한다. 여러 개의 스토어를 만들어 사..

reducer : 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수이다. function reducer(state, action) { // 새로운 상태를 만드는 로직 // const nextState = ... return nextState; } reducer 에서 반환하는 상태는 곧 컴포넌트가 지닐 새로운 상태가 되게 된다. action : 업데이트를 위한 정보이다. 주로 type값을 지닌 객체 형태로 사용되기도 한다. useReducer useReducer를 쓸려면 reducer의 구조를 알아야 되서 살펴보았다. useReducer()함수는 첫번째 인자로 넘어오는 reducer 함수를 통해 컴포넌트의 상태(state)가 행동(action)에 따라 어떻게 변해야하는지를 정의한다..