web study

기존 Redux에서는 middleware를 사용하여 비동기 처리를 해야 했다. 안 그래도 복잡한 코드가 더 복잡해져 유지보수가 까다로워진다. Redux Toolkit은 간결한 코드로 비동기 처리를 쉽게 할 수 있다. Redux와 Redux toolkit 비동기 처리 비교 구분 Redux Redux Toolkit 비동기 처리 도구 Middleware - Redux Thunk - Redux Saga createAsyncThunk 액션 타입 정의 수동으로 정의해야 함 자동으로 생성됨 코드 구문 Boilerplate 코드가 많음 Redux보다 간결함 설치 및 설정 별도의 미들웨어 설치 및 설정이 필요 Redux Toolkit 패키지만 설치하면 따로 설치할 필요 없음 액션 생성 액션 생성자에서 직접 디스패치 cr..

Redux toolkit은 Redux를 효율적으로 사용하기 위한 공식 라이브러리다. Redux를 사용하던 개발자들이 보다 쉽게 코드를 작성하고 유지보수할 수 있도록 해준다. Redux toolkit을 통해 Redux의 코드 복잡성을 줄이고, 보일러플레이트 코드(반복적인 코드)를 최소화하며, 개발자 경험을 향상할 수 있다. 왜 Redux Toolkit을 사용해야 하는가? 1. 간결한 코드 createSlice와 configureStore와 같은 간편한 함수들을 제공하여 보일러플레이트 코드를 최소화한다. 2. 불변성 유지 createSlice는 내부적으로 Immer 라이브러리를 사용한다. Immer 라이브러리는 기존 객체를 직접적으로 수정해도 불변성을 유지될 수 있도록 해준다. Immer는 이전 상태를 변경..

리액트 미들웨어는 애플리케이션의 액션과 스토어 상태 간의 중간 단계로서 동작하는 소프트웨어다. 주로 Redux와 함께 사용되며, 액션을 처리하거나 상태를 변화시키기 전에 추가적인 작업을 수행할 수 있다. 미들웨어 정리표 미들웨어 설명 redux-thunk 비동기 작업을 처리하고 액션 생성자에서 함수를 반환할 수 있게 해준다. 주로 비동기 작업을 다룰 때 사용된다. redux-saga 제너레이터 함수를 이용하여 복잡한 비동기 작업을 처리하는 미들웨어 redux-logger 개발환경에서 스토어의 액션과 상태를 콘솔에 로깅하여 디버깅을 도와주는 미들웨어 redux-persist 스토어의 상태를 지속적으로 유지하고, 로컬 스토리지 또는 다른 저장소에 상태를 저장할 수 있게 해준다. redux-throttle 특..

Redux Thunk는 미들웨어 중 하나로, 비동기 작업을 처리하고 액션을 디스패치할 수 있게 도와주는 라이브러리다. 리덕스는 동기적인 작업에 특화되어 있어서, 비동기 작업을 처리하기 위해서는 Thunk와 같은 미들웨어가 필요하다. 그 외에도 비동기 작업을 처리하는 미들웨어로 Redux Saga, Redux Observable 등이 있다. 동기적 액션 생성자와 Thunk를 사용한 비동기 액션 생성자 비교 동기적 액션 생성자 액션 함수는 단순히 액션 ‘객체’를 반환 반환 형식: { type: '액션_타입', payload: '데이터' } 동기적인 액션을 생성하는 역할 Thunk를 사용한 비동기 액션 생성자 비동기 액션 함수는 ‘함수’를 반환 비동기 액션 함수는 dispatch를 인자로 받음 이를 통해 함수..

Redux는 JavaScript 애플리케이션의 상태 관리 라이브러리이다. React에서 Redux를 사용하는 주된 이유는 상태 관리의 효율성과 예측 가능성을 높이기 위함이다. React 차체에서도 컴포넌트 state를 통한 상태 관리가 가능하지만, 복잡한 상태 관리가 필요한 대규모 애플리케이션에서는 Redux와 같은 전역 상태 관리 방식을 도입한다. Redux 사용 이유 중앙 집중식 상태 관리와 단일 출처 Redux는 상태를 하나의 스토어에 저장한다. 때문에 한 곳에서 모든 상태 관리가 이루어진다. 이는 데이터가 어디서 오는지 명확하게 파악할 수 있게 하며, 데이터의 일관성을 유지할 수 있다. 예측 가능성 Redux는 상태의 변화를 예측 가능한 방식으로 다룬다. 상태는 불변성을 유지하면서 액션에 의해 변..

리액트의 상태 관리 방법에는 여러 가지가 있다. 효과적인 상태 관리는 매우 중요하다. 상태 관리의 핵심은 어떻게 애플리케이션의 데이터를 구조화하고 관리하는가에 달려있다. 크게는 로컬 상태 관리와 전역 상태 관리를 기준으로 나눌 수 있다. 리액트 상태 관리 방법 정리표 관리 방법 로컬/전역 주요 특징 주요 사용 시점 useState Hook 로컬 - 함수형 컴포넌트에서 상태를 관리하는 데 사용됨 작은 규모의 컴포넌트 또는 컴포넌트 간 통신에 적합 useReducer Hook 로컬 - 복잡한 상태 로직을 다룰 때, 이전 상태와 액션을 활용하여 상태를 업데이트 - 컴포넌트 로직을 분리하고 예측 가능한 상태 관리 가능 복잡한 상태 로직이나 컴포넌트 간 통신이 많은 경우 Context API 전역 - 컴포넌트 트..

useReducer는 React의 훅 중 하나로, useState처럼 state를 생성하고 관리할 수 있게 해주는 도구이다. useReducer는 여러 개의 하위 값을 포함하는 복잡한 state를 다뤄야 할 때 사용한다. useState와 비교하며 useReducer를 왜 사용하는지부터 우선 알아보자. useState VS. useReducer useState는 간단한 상태 관리에 주로 사용된다. 하지만 상태가 복잡하고 여러 개의 하위 값이 포함된 경우, 상태를 업데이트하는 로직이 복잡해질 수 있다. 이때, useReducer를 사용하면 복잡한 상태 로직을 더 효율적으로 다룰 수 있다. 복잡한 상태란, 여러 하위 값을 포함하거나 여러 상태 간의 관계가 복잡한 경우를 의미한다. 예를 들어, 사용자의 프로필..

React에서 컴포넌트 간의 효율적인 상태 관리는 중요한 요소 중 하나다. 특히 자식 컴포넌트에서 부모 컴포넌트의 상태를 업데이트하는 상황이 종종 있다. 자식 컴포넌트에서 부모 컴포넌트의 상태를 업데이트 여러 가지 방법이 있는데, 이러한 다양한 방법은 각각의 상황에 맞게 선택되어야 한다. 각 방법의 장단점과 코드 예시를 함께 알아보면서 효율적인 상태 관리를 구현하는 방법을 이해하도록 해보자. 1. 콜백 함수를 활용한 상태 업데이트 React의 기본 원칙 중 하나는 단방향 데이터 흐름이다. 부모 컴포넌트는 자식 컴포넌트에게 콜백 함수를 전달하고, 자식 컴포넌트에서 해당 콜백을 호출하여 부모 컴포넌트의 상태를 간접적으로 업데이트할 수 있다. 이는 단방향 데이터 프름을 유지하면서 부모 컴포넌트와 자식 컴포넌트..

전역적으로 보여야 하는 컴포넌트는 어디에 import 해야 할까? react-router-dom v6 버전에서는 이전 버전과는 다른 라우팅 방식이 도입되었다. 이에 따라 Navbar 컴포넌트를 어디에서 import 해야 하는지에 대한 접근도 바뀌었다. v6에서는 아래 코드와 같이 App.js에 전역 컴포넌트를 import 하면 에러가 날 것이다. function App() { return ( {/* 전역 컴포넌트 */} {/* 라우팅 */} ) } export default App 🚫 Cannot destructure property 'basename' of 'react__WEBPACK_IMPORTED_MODULE_0__.useContext(...)' as it is null… 🚫 The above er..

리액트에서 onClick은 이벤트 핸들러 중 하나로서, 마우스 클릭 이벤트에 응답하여 실행되는 콜백 함수이다. 보통 버튼이나 링크와 같은 요소에 onClick 이벤트 핸들러를 등록하여 해당 요소를 클릭했을 때 원하는 동작을 수행할 수 있다. onClick 이벤트 핸들러에 함수를 전달하는 방법 함수 이름을 전달 (함수 자체를 전달) onClick prop에 함수 이름만을 전달 예시: 클릭 클릭 이벤트가 발생하면 handleClick 함수가 실행됨 익명 함수를 사용하여 전달 onClick prop에 익명 함수를 전달 예시: { console.log('클릭되었습니다.'); }}>클릭 클릭 이벤트가 발생하면 익명 함수가 실행되며, 원하는 동작을 수행 함수 호출 결과를 전달 함수 호출 결과를 onClick pro..