반응형 Frontend/React30 React Props: setState와 함수 시그니처의 차이점 //함수 시그니처interface ModalProps { setIsModalOpen: (isOpen: boolean) => void; }// setStateinterface ModalProps { setIsModalOpen: React.Dispatch>}두 타입은 비슷해 보이지만 중요한 차이점이 있다. 사용 의도와 동작에 따라 적합한 상황이 나뉘며, 아래에서 각각의 의미를 설명하겠다.1. setIsModalOpen: (isOpen: boolean) => void이 타입은 함수 시그니처를 정의한다. setIsModalOpen은 단순히 boolean 값을 받아서 특정 작업을 수행하는 함수이다.예시:const handleModalToggle = (isOpen: boolean) => { console.lo.. 2024. 11. 19. [React] 데이터 fetch와 state 관리는 페이지 vs 컴포넌트 ?? 데이터 fetch와 state 관리는 페이지 단에서 하는 것이 좋다. 1. 최소한의 네트워크 호출데이터를 한 번만 fetch하고, 그 데이터를 여러 컴포넌트에 전달할 수 있기 때문에 불필요한 네트워크 요청을 줄일 수 있다. 만약 각 컴포넌트에서 데이터를 개별적으로 fetch한다면, 불필요한 중복 호출이 발생할 수 있다.2. 상태 관리의 중앙 집중화페이지 단에서 fetch와 state 관리를 하면 여러 하위 컴포넌트에 데이터를 쉽게 전달할 수 있다. 이렇게 하면 상태 관리가 중앙 집중화되어 예측 가능하고 유지보수가 쉬워진다.3. UI 성능 최적화페이지 전체에서 데이터를 필요로 하는 경우, 한 번의 데이터 fetch로 모든 컴포넌트에 필요한 데이터를 공급할 수 있다. 이를 통해 로딩 상태를 일관되게 관리하고.. 2024. 9. 13. 리액트 18버전 변경점(useTransition, Suspense and SSR, Automatic Batching) 1. useTransition블로킹렌더링문제한번 렌더링 연산이 시작되면 멈출 수 없음대형화면 업데이트의 경우 렌더링되는동안 페이지 지연이 발생useTransitionuseTransition 훅은 사용자가 상태를 전환할 때 UI 업데이트를 더 부드럽게 만들기 위해 도입되었다. 이는 UI의 일부가 비동기 작업으로 인해 느려지는 것을 방지하고, 사용자가 인터랙션을 할 때 더 좋은 경험을 제공한다.기능사용자 인터페이스의 느린 업데이트를 처리하기 위해, 긴급하지 않은 업데이트를 우선 순위가 낮은 작업으로 처리한다.사용자는 여전히 긴급한 업데이트(예: 버튼 클릭)에 빠르게 반응하는 UI를 경험한다.사용법import { useTransition, useState } from 'react'; function MyCom.. 2024. 7. 24. 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. 이전 1 2 3 다음 반응형 최근댓글 최근글 인기글 © Copyright 2023 jngmnj
최근댓글