기록 (53) 썸네일형 리스트형 Redux의 Ducks Pattern Ducks PatternDucks Pattern이란?리덕스를 사용하다 보면 수많은 Action과 Action Creator, Reducer들을 정의하게 되면서 리덕스의 복잡도도 높아지게 된다. 이런 상황에서 Action, Action Creator, Reducer들을 어떤 규칙에 따라 정리해놓지 않으면 나중에는 코드를 작성한 사람도 이해하지 못하는 상태가 될 수 있다. 그래서 등장하게 된 것이 바로 덕스 패턴이다. 덕스 패턴은 Action, Action Creator, Reducer들을 하나의 모듈처럼 한 파일 안에 작성하는 규칙이다.Ducks Pattern 규칙덕스 패턴에는 몇 가지 지켜야 할 규칙들이 있다. 반드시 리듀서 함수를 default export해야 한다.반드시 액션 생성 함수를 export.. [TIL] Redux의 createSlice createSliceslice란?리덕스에서의 slice는 리덕스 구성 요소들의 조각이다. 리덕스 구성 요소에는 Action Type, Action Creator, Reducer 등이 포함된다. 구성 요소들을 조각으로 분리해 놓은 것을 slice라고 부른다.createSlice는?createSlice 함수는 slice를 만들어주는 함수다. createSlice 함수를 이용하면 액션과 리듀서를 하나의 파일에서 관리할 수 있다.createSlice 사용법import { createSlice } from '@reduxjs/toolkit';const counterSlice = createSlice({ name: 'counter', initialState: { count: 0 }, reducers:.. [TIL] Redux의 미들웨어 Redux의 미들웨어 미들웨어란?미들웨어란 리덕스에 원하는 기능을 추가할 수 있게 해주는 함수다. 이 함수는 규칙에 따라 리덕스 스토어의 dispatch 함수와 getState 함수가 포함된 객체를 매개변수로 받게 된다. 미들웨어를 사용하면 리덕스 스토어에서 액션이 처리될 때 함께 작동하길 원하는 코드를 끼워 넣을 수 있다. 미들웨어 사용법 const initializeStore = () => { const store = configureStore({ reducer: rootReducer, middleware: [] }) return store} configureStore 함수의 매개변수는 middleware란 이름의 선택 속성을 가지고 있는데 빈 배열을 설정한 middleware 속성에.. [TIL] Redux의 combineReducers combineReducerscombineReducers는?리덕스를 사용하다보면 수많은 액션과 리듀서들이 생기게 돼서 복잡해진다. 리덕스는 이런 리듀서의 복잡함을 덜 수 있게 여러 리듀서를 하나로 합쳐 주는 combineReducers 함수를 제공한다. 이렇게 모든 리듀서들이 하나로 합쳐진 것을 rootReducer라고 부른다. combineReducers 사용법 import { combineReducers } from 'redux';import postReducer from './reducers/postReducer';import commentReducer from './reducers/commentReducer';const rootReducer = combineReducers({ post: p.. [TIL] Redux의 useSelector, useDispatch useSelector 훅useSelector 훅은?useSelector 훅은 리덕스 스토어의 state로부터 원하는 데이터만 선택할 수 있게 해주는 훅이다. useSelector 훅을 통해 반환된 상태값이 변경된 경우 컴포넌트를 다시 렌더링 시킨다.useSelector 훅 사용법const result = useSelector(selector); useSelector 훅의 인자로 selector 함수를 넣는다. selector 함수는 리덕스 스토어의 state를 매개변수로 받아서 state를 가공한 후 반환한다. useDispatch 훅useDispatch 훅은?useDispatch 훅은 리덕스 스토어의 dispatch 함수에 접근하기 위해 사용되는 훅이다. dispatch 함수는 액션 객체를 스토어에 전.. [TIL] Context API와 Redux의 차이 / Redux Toolkit Context API와 Redux의 차이Context APIContext API는 상태 관리 도구가 아니다. 상태 관리는 직접 관리해야 하는데 Context API는 전역적으로 상태를 공유해주는 기능만 수행한다. Context API는 전달되는 값을 결정하는 역할을 하고 실제 상태 관리는 useState 또는 useReducer 훅이 한다.Redux리덕스는 Context API와 다르게 전역 상태 관리를 하기 위해 설계되었다. 그래서 단순히 공유하는 기능만 필요하면 Context API를 사용하고 여러 컴포넌트 간의 복잡한 상태를 관리하려면 Redux를 사용하는 게 좋다. Redux ToolkitRedux Toolkit은?리덕스 툴킷은 효율적인 리덕스 개발을 위한 공식 도구 모음이다. 도구 모음이기 때문.. [TIL] 상태 관리 / Redux 최근에 상태 관리 라이브러리로 Zustand가 많이 쓰이고 있지만 아직까지는 Redux가 압도적으로 많이 쓰인다. 많이 쓰기도 하고 Redux와 Zustand의 사용 방법이 유사해서 Zustand를 배우기 전 Redux를 배우는 것이 좋다고 생각했다.현재는 왜 Redux에서 다른 라이브러리로 옮겨가고 있는 건지도 찾아보고자 한다. 상태 관리상태 관리란?상대 관리란 애플리케이션의 다양한 상태를 효과적으로 추적하고 조작하는 과정을 말한다. 여기서 상태는 애플리케이션에서 특정 시점에 저장된 데이터를 의미하며 UI, 서버와의 상호작용 등에서 중요한 역할을 한다.상태 관리의 필요성쉬운 데이터 공유부모 컴포넌트에서 자식 컴포넌트로의 전달이 아니더라도 여러 컴포넌트 간에 데이터 전달을 쉽게 할 수 있다. 효율적인 .. [TIL] forwardRef / useImperativeHandle forwardRef자식 컴포넌트에 ref 전달ref를 이용해서 DOM 객체에 접근할 수 있지만 부모 컴포넌트에서 자식 컴포넌트의 DOM 객체에 접근하는 것은 허용하지 않는다. 이때 forwardRef 함수를 사용하면 부모 컴포넌트에서 생성된 ref를 자식 컴포넌트에게 전달할 수 있다. 이를 통해 부모 컴포넌트가 자식 컴포넌트의 인스턴스에 접근할 수 있도록 한다. forwardRef 사용법 import { useEffect, useRef, forwardRef } from "react";function ChildComponent(props, ref) { return ;}const ForwardedChild = forwardRef(ChildComponent);export default function Par.. 이전 1 2 3 4 ··· 7 다음