본문 바로가기
반응형

분류 전체보기
139

Vite와 CRA Vite와 CRA Vite와 Create React App은 둘 다 JavaScript 및 TypeScript를 사용하여 React 애플리케이션을 빠르게 구성할 수 있는 도구입니다. 그러나 두 도구 간에는 몇 가지 차이점이 있습니다. Vite 장점 빠른 개발 서버: Vite는 빠른 개발 서버를 제공하여 코드 수정 사항을 빠르게 반영할 수 있습니다. 최신 모듈 시스템 활용: Vite는 ES 모듈을 사용하므로, 브라우저에서 필요한 파일만 로딩하여 빌드 시간이 단축됩니다. 효율적인 환경 구성: 미리 구성된 환경 설정이 간단하며, 필요한 경우 더 많은 세부적인 설정을 추가할 수 있습니다. Vue 및 React 지원: Vite는 Vue 및 React 프로젝트를 모두 지원하므로 선택의 폭이 넓습니다. 단점 초기 학.. 2023. 12. 28.
[React] 리액트 미들웨어 redux-saga 비동기 작업을 처리하는 미들웨어 redux-saga 사용하기 redux-saga redux-saga는 redux-thunk 다음으로 많이 사용하는 비동기작업 관련 미들웨어이다. redux-thunk는 함수형태의 액션을 디스패치하여 미들웨어에서 해당함수에 스토어의 dispatch와 getState를 파라미터로 넣어서 사용하는 원리이다. thunk함수 내부에서 원하는 API요청도 하고, 다른 액션을 디스패치하거나 현재 상태를 조회하기도 한다. 대부분의 경우 redux-thunk로도 충분히 기능을 구현할 수 있다. redux-saga는 좀 더 까다로운 상황에서 유용하다. 기존 요청을 취소 처리해야할 때(불필요한 중복 요청 방지) 특정 액션이 발생했을 때 다른 액션을 발생시키거나, API요청 등 리덕스와 관계 .. 2023. 12. 28.
[React] 리액트 미들웨어 redux-thunk 비동기 작업을 처리하는 미들웨어 사용 미들웨어는 여러가지 종류가 있다. redux-thunk: 비동기 작업을 처리할때 가장 많이 사용. 객체가 아닌 함수형태의 액션을 디스패치 할 수 있게 해준다. redux-saga: redux-thunk 다음으로 많이 사용되는 비동기작업관련 미들웨어 라이브러리. 특정액션이 디스패치 되었을때 정해진 로직에 따라 다른 액션을 디스패치시키는 규칙을 작성하여 비동기 작업을 처리할 수 있게 해준다. redux-thunk Thunk란 특정 작업을 나중에 할 수 있도록 미루기 위해 함수형태로 감싼것 의미. redux-thunk를 사용하면 thunk함수를 만들어서 디스패치 할 수 있다. 그러면 리덕스 미들웨어가 그 함수를 전달 받아 store의 dispatch와 getState를 파.. 2023. 12. 28.
[React] 리액트 미들웨어란? API 서버를 연동할때, 리덕스를 사용하고 있으며 이러한 비동기 작업을 관리해야한다면 미들웨어를 사용하여 매우 효율적이고 편하게 상태관리를 할 수 있다. 작업환경준비 프로젝트 만들기 $ mkdir react-middleware $ cd react-middleware $ npm init vite $ npm install $ npm install react-redux redux-actions counter 리덕스 모듈 modules/counter.js import { createAction, handleActions } from "redux-actions"; const INCREASE = "counter/INCREASE"; const DECREASE = "counter/DECREASE"; export con.. 2023. 12. 28.
[Redux] 리덕스를 사용하여 상태 관리 작업환경설정 $ mkdir react-redux-tutorial $ cd react-redux-tutorial $ npm init vite $ npm install $ npm install redux react-redux (@reduxjs/toolkit은 사용안하는지 궁금하닷.. ) UI준비 리액트 프로젝트에서 리덕스를 가장 많이 사용하는 패턴은 프레젠테이셔널 컴포넌트와 컨테이터 컴포넌트를 분리하는 것. 프레젠테이셔널 컴포넌트: 주로 상태관리가 이루어지지 않고 props만 받아와서 화면에 UI를 보여주기만 하는 컴포넌트. UI관련 컴포넌트. src/components 경로 컨테이너 컴포넌트: 리덕스와 연동되어 있는 컴포넌트. 리덕스로부터 상태를 받아오기도 하고 리덕스 스토어에 액션을 디스패치 하기도 함... 2023. 12. 28.
[Redux] 리덕스 라이브러리 이해하기 리덕스는 가장 많이 사용하는 리액트 상태관리 라이브러리다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다. 단순 전역상태관리는 Context API를, 프로젝트의 규모가 클 경우에는 리덕스를 사용하는편이 좋다. 리덕스 장점 코드의 유지보수성 높여줌 작업효율 극대화 편리한 개발자도구 지원 미들웨어 기능 제공 -> 비동기 작업을 훨씬 효율적으로 관리 개념 미리 정리하기 액션 상태에 어떠한 변화가 필요하면 액션이 발생. 액션은 하나의 객체로 표현된다. 액션 객체는 type 필드를 반드시 가지고 있어야한다. 이값은 액션의 이름이라고 생각하면 된다. 그 외의 값들은 상ㅇ태 업데이트를 할때 참고할 값이며, 마음대로 넣을 수 있음. { type: 'AD.. 2023. 12. 28.
[React] Context API Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을때 유용한 기능이다. 사용자 로그인정보, 애플리케이션 환경 정보, 테마 등 여러 종류가 있다. 리액트 관련 라이브러리에서도 많이 사용되고 있다. 예를들어 리덕스, 리액트 라우터, styled-components 등의 라이브러리는 Context API 기반으로 구현되어 있다. Context API를 사용한 전역 상태 관리 흐름 이해하기 컴포넌트간의 데이터를 props로 전달하기 위해 컴포넌트 여기저기서 필요한 데이터가 있을때는 주로 최상위 컴포넌트인 App의 state에 넣어서 관리했다. 그리고 App이 지니고 있는 state를 여러 컴포넌트를 거쳐서 전달해야했다. 이런 방식을 사용하면 유지보수성이 낮아진다. *Context API를.. 2023. 12. 28.
[React] immer를 사용해 쉽게 불변성 유지! 개요 불변성을 유지하면서 상태를 업데이트해야하는데 객체의 구조가 엄청나게 깊어지면 전개 연산자와 배열의 내장함수 만으로는 객체를 복사하고 새로운값을 덮어쓰는것을 매번하기가 힘들고 가독성이 좋지 않음. immer라는 라이브러리를 사용하면 구조가 복잡한 객체도 매우 쉽고 짧은 코드를 사용하여 불변성을 유지하면서 업데이트 해 줄 수 있음. immer 설치와 사용법 프로젝트 준비 $ yarn create react-app immer-tutorial $ cd immer-tutorial $ yarn add immer immer 적용전 불변성 유지 import logo from './logo.svg'; import './App.css'; import {useCallback, useRef, useState} from .. 2023. 12. 28.
반응형

최근댓글

최근글

© Copyright 2024 ttutta

티스토리툴바