반응형 Frontend/React27 MobX 를 이용한 간단한 앱 만들기 01. MobX 란 redux이후로 많이 사용되는 상태관리 라이브러리이다. MobX는, 간단하고 확장 가능한 상태 관리, 쉽고 확장성 있게 만들어주는 검증된 라이브러리다. 특징 쉽다. 미니멀하고 보일러 플레이트로부터 자유로운 코드를 통해 당신의 의도를 잘 담아내 보세요. 데이터를 변경하고 싶습니까? 자바스크립트 할당문을 사용하면 됩니다. 비동기 과정에서 데이터를 변경하고 싶습니까? 새로운 도구는 필요 없으며 MobX 시스템이 변경사항을 찾아내고 사용 중인 곳에 전달합니다. 렌더링 최적화를 쉽게 할 수 있다. 데이터의 모든 변경과 사용은 런타임에 추적되고 상태와 출력 사이의 모든 관계를 나타내는 의존 트리(dependency tree)를 만듭니다. 따라서 리액트 컴포넌트들처럼 상태에 따라 필요한 경우에만 .. 2024. 1. 17. [React] 코드 스플리팅(React.lazy와 Suspense, 그리고 Loadable Components) 서론 SplitChunks기능을 통한 기본적 코드스플리팅 리액트 프로젝트 빌드 시, CRA의 기본 웹팩이 파일 크기 최소화, 정적 파일 경로 설정, 브라우저에서 JSX 및 최신 JS 문법이 실행되도록 트랜스파일 작업을 하며, SplitChunks 기능을 통해 자동으로 파일 분리 및 캐싱 최적화를 수행한다. 숫자로 시작하는 파일에는 라이브러리관련코드(node_modules. 자주 바뀌지 않는 코드)가 들어있고, main으로 시작하는 파일에는 직접 프로젝트에 작성하는 컴포넌트들(자주 바뀌는 코드)에 대한 코드가 들어있다. 이렇게 둘로 따로 파일로 묶어 캐싱효과를 낸다. 이런 파일을 분리하는 작업을 코드 스플리팅이라고 한다. 하지만 SplitChunks 기능을 통한 코드 스플리팅은 단순히 효율적인 캐싱효과만 .. 2024. 1. 10. [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. [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. [React] 컴포넌트 성능 최적화(React.memo와 useCallback, useReducer) 리액트 컴포넌트 성능 최적화 흐름 많은 데이터 렌더링하기 크롬 개발자 도구를 통한 성능 모니터링 React.memo를 통한 컴포넌트 리렌더링 성능 최적화 함수가 새로워지는 현상 방지하기 react-virtualized를 사용한 렌더링 최적화 투두리스트앱을 가지고 테스트해보겠다. 많은 데이터 렌더링하기 랙lag을 경험할 수 있도록 많은 데이터 렌더링해보기 function App() { const createBulkTodos = () => { const array = []; for(let i = 1; i { setTodos(todos.filter(todo => todo.id !== id)); }, [todos], ) const onToggle = useCallback( (id) => { setTodos( t.. 2023. 12. 28. [React] 뉴스뷰어 프로젝트(비동기작업 기초) 비동기작업의 이해 서버쪽 데이터가 필요할때 Ajax기법을 사용하여 서버의 API를 호출함으로써 데이터를 수신한다. 이과정에서 해당 작업을 비동기적으로 처리하게된다. 만약 작업을 동기적으로 처리한다면 요청이 끝날때까지 기다리는 동안 중지상태가 되기때문에 다른작업을 할 수 없다. *비동기적으로 처리한다면 웹 애플리케이션이 멈추지 않기때문에 동시에 여러가지 요청을 처리할 수 있고, 기다리는 과정에서 다른 함수도 호출 할 수 있다. * 서버 API 호출 외에도 작업을 비동기적으로 할때가 있는데, setTimeout함수를 사용하여 특정작업을 예약할 때이다. function printMe() { console.log("HELLO WORLD" } setTimeout(printMe, 3000); setTimeout이 .. 2023. 12. 28. 리덕스 툴킷과 많이 사용하는 미들웨어(redux-saga, redux-thunk 등) 리덕스 툴킷은 Redux를 편리하게 사용할 수 있도록 도와주는 도구이다. 여기에는 몇 가지 흔히 사용되는 미들웨어가 있다. redux-thunk 비동기 작업을 처리하기 위한 미들웨어로, 함수 형태의 액션을 생성하여 비동기 작업을 수행할 수 있다. const fetchData = () => { return async (dispatch) => { dispatch(fetchDataRequest()); try { const data = await api.fetchData(); dispatch(fetchDataSuccess(data)); } catch (error) { dispatch(fetchDataFailure(error)); } }; }; redux-logger 액션의 디스패치와 상태의 변화를 콘솔에 로깅하.. 2023. 12. 22. 리덕스와 리덕스 툴킷(createSlice, handleActions) 사용해야 하는 도구나 함수의 선택은 개인적인 취향, 프로젝트의 규모, 팀의 선호도 등 여러 요소에 따라 다를 수 있다. 그러나 Redux Toolkit은 Redux 코드를 작성하는 데 있어서 편의성과 효율성을 제공하므로, 많은 프로젝트에서는 Redux Toolkit을 선호하는 경향이 있다. 여기 몇 가지 고려해야 할 사항이 있다: 프로젝트 규모와 복잡도: 작은 규모의 프로젝트에서는 Redux Toolkit의 편의성이 더 큰 장점이 될 수 있다. 큰 규모의 복잡한 애플리케이션의 경우에는 더 많은 커스터마이징이 필요할 수 있으므로 해당 요구에 맞게 Redux의 기본 기능을 직접 사용할 수도 있다. Redux Toolkit의 특징 활용: Redux Toolkit은 createSlice, configureSto.. 2023. 12. 22. 이전 1 2 3 다음 반응형 최근댓글 최근글 인기글 © Copyright 2023 jngmnj
최근댓글