Per ardua ad astra.

객체 표기법(Object Notation) 방식과 빌더 콜백 표기법(Builder Callback Notation) 방식들어가며리덕스 툴킷(Redux Toolkit, RTK)의 객체 표기법(Object Notation) 방식과 빌더 콜백 표기법(Builder Callback Notation) 방식에 대해 정리해본다. 객체 표기법(Object Notation) 방식 vs. 빌더 콜백 표기법(Builder Callback Notation) 방식RTK 버전 1.6.0 이상부터 기존의 객체 표기법(Object Notation) 방식에서 빌더 콜백 표기법(Bulder Callback Notation) 방식으로 작성해야 한다.기존의 객체 표기법은 더 이상 사용되지 않는다. 객체 표기법(Object Notation)..

리덕스(Redux), 리덕스 툴킷(Redux Toolkit)들어가며리액트(React.js)의 전역 상태 관리 라이브러리 중의 하나인 리덕스(Redux)와 리덕스 툴킷(Redux Toolkit)에 대해 정리해본다.  리덕스(Redux)개념자바스크립트 애플리케이션에서 상태 관리를 위해 사용되는 상태 컨테이너애플리케이션의 상태를 중앙에서 관리함으로써 상태 변화를 쉽게 추적하고, 디버깅을 단순화하며, 다양한 컴포넌트 간에 상태를 공유하는 것을 쉽게 해준다.리덕스를 사용하기 위해서는 아래의 명령을 실행하여 관련 패키지를 설치해준다.$ yarn add redux # npm install redux$ yarn add react-redux # npm install react-redux  리덕스..

caseReducers (Redux Toolkit) 속성들어가며리덕스 툴킷(Redux Toolkit)의 @caseReducers@ 속성에 대해 정리해본다.이 속성을 이용하면 슬라이스 내의 개별 리듀서 함수에 직접 접근하고 호출할 수 있다. createSlice() 함수와 caseReducers 속성createSlice() 함수슬라이스(Slice)를 정의하기 위해 사용된다.슬라이스는 특정 상태(State)와 그 상태를 변경하는 리듀서(Reducer)들을 한 곳에 모아놓은 것이다.슬라이스는 자동으로 액션 생성자(Action Creators)와 액션 타입(Action Types)을 생성해준다.reducers 옵션@createSlice@ 함수의 @reducers@ 옵션은 슬라이스의 상태를 변경하는 여러 개의 리..

Thunk API (Redux Toolkit)들어가며리덕스 툴킷(Redux Toolkit)의 Thunk API에 대해 정리해본다. Thunk API개념비동기 작업을 간편하게 처리할 수 있는 도구로, 여러가지 기능을 제공한다.주로 API 호출과 같은 비동기 작업을 처리할 때 사용되며, 액션(Action)을 디스패치(Dispatch)하고 애플리케이션의 상태를 관리할 수 있다. 구성기본적으로 2개의 매개변수를 제공한다.@dispatch@액션을 디스패치할 수 있는 함수비동기 작업의 결과에 따라 다른 액션을 보낼 수 있다. @getState@현재 스토어의 상태(State)를 가져오는 함수상태에 따라 로직을 다르게 처리할 수 있다. 사용 방법@createAsyncThunk@를 사용하여 비동기 액션 크리에이터를 생성..

로컬 스토리지(LocalStorage)에 내용을 저장하고, 전역 상태 관리 라이브러리(Redux)와 동기화 하는 방법들어가며리액트(React.js)에서 특정 변수를 로컬 스토리지(Local Storage)에 저장하고, 전역 상태 관리 라이브러리(Redux)와 동기화 시키는 방법을 정리해본다.이렇게 함으로써, 사용자의 입력을 받아 특정 변수를 화면에 표시해줘야 할 경우 새로고침을 해도 동일한 내용이 표시되게 할 수 있다. 로컬 스토리지(Local Storage)개념브라우저에 데이터를 영구적으로 저장할 수 있는 방법브라우저가 닫혀도 데이터가 유지되며, 도메인별로 구분되어 저장된다.로컬 스토리지는 키-값(Key-Value) 형식으로 데이터를 저장하며, 데이터는 문자열 형식으로만 저장할 수 있다.따라서 객체(O..

리액트에서의 상태 관리 방법리액트(React)에서 상태 관리 방법에 대해 알아보자.리액트에서는 상태 관리를 위해 여러 가지 방법을 사용할 수 있으며, 상황에 따라 적절한 방법을 선택하는 것이 중요하다. 상태 관리 방법1. 지역 상태(Local State)리액트의 useState 훅을 사용하여 컴포넌트 내부에서 상태를 관리할 수 있다.작은 규모의 애플리케이션이나 단일 컴포넌트에서 상태 관리가 필요한 경우 적합하다.import React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count..