상태관리 라이브러리/Redux (6) 썸네일형 리스트형 [Redux] redux의 유지 보수 및 최적화 팁 3가지 redux를 사용하면서 발생할만한 문제나 유지보수 및 최적화를 위한 방법을 몇 가지 적는다. 커스텀 셀렉터 훅 정의 컴포넌트와 redux의 store를 연동할 때는 useSelector를 사용해서 필요한 부분만 참조한다. 따라서 store의 내부 구조가 불가피하게 변경되면 컴포넌트의 useSelector에서 store를 참조하는 방식 역시 바꿔야 한다. 이 작업은 앱의 규모가 커지고 useSelector를 이용한 참조가 많을수록 번거로워진다. 이럴 때 VSC의 search & replace를 이용하면 필요한 부분을 전부 찾아 수정할 수 있지만, selector를 커스터마이징하여 참조하는 방식으로도 해결 가능하다. export const todoSelector = (state: TypeStore) => s.. [Redux] 사용법부터 이론까지 살펴보는 Redux: 5. 입문자를 위한 createSlice 기본 세팅 소개 redux는 정말 좋은 라이브러리지만, 세팅해야할 게 많다. 액션 타입을 상수로 지정하고, 액션 생성자도 만들고, 액션 타입에 맞춰서 리듀서 함수도 만들어야 하니 말이다. 다행히 redux-toolkit은 이런 반복되는 코드를 정리해주는데, 그 중 createSlice는 createAction이나 createReducer에 비해서 간결한 코드를 제공하지만, 보일러 코드를 많이 축약하다 보니 처음 봐선 구조가 쉽게 이해되지 않는다. 따라서, 이 기능의 세팅방식에 대해 살펴보겠다. 1. store 세팅 export const store = configureStore({ reducer: { }, }); export type TypeStore = ReturnType; store는 cofigureStore을 사용.. [Redux] 사용법부터 이론까지 살펴보는 Redux: 4. Redux-toolkit 리덕스는 전역 상태관리 라이브러리이자 중앙집중식 스토어로서 유용하다. 하지만, 리덕스에는 세 가지 불편함이 존재했다. store, reducer, actionCreater 등의 초기 세팅을 위해 반복적으로 많은 코드를 작성해야 한다. reducer는 불변성의 법칙에 따라 store를 변형하면 안된다. 따라서, 복잡한 state를 가공하기 위해 spread 연산자 등의 기법을 사용해서 긴 코드를 작성해야 한다. reducer을 잘 사용하기 위해 여러 라이브러리를 직접 설치해줘야 한다.(immer, reselect ...) 타입스크립트가 제대로 지원되지 않는다. 이런 불편함에 대한 대안으로서 등장한 redux-toolkit은 다음 이점을 가지고 있다. 반복적으로 작성하던 세팅을 간소하게 작성 가능 스토어 변.. [Redux] 사용법부터 이론까지 살펴보는 Redux: 3. 리엑트에서의 사용 방법 상태관리 라이브러리인 리덕스를 리엑트와 연결시키는 방법에 대해 알아보자. 세팅 redux, react-redux 일반적으로는 여기에서 보일러 플레이트를 간편하게 세팅하고 dev tool을 사용하기 위해 redux-toolkit을 추가한다. 하지만, 여기서는 리엑트에 리덕스를 연결시키는 방법에만 집중하기 위해 다음 기회에 다루겠다. 스토어 생성 및 앱에 바인딩하기 provider provider은 react-redux가 제공하는 컴포넌트다. 이걸로 리엑트 컴포넌트를 감싸주면, 해당 컴포넌트에서 리덕스 스토어를 가져오고 dispatch 할 수 있다. //@ 리덕스 스토어를 세팅한 후, Provider 앱에 import const root = ReactDOM.createRoot(document.getEleme.. [Redux] 사용법부터 이론까지 살펴보는 Redux: 2 바닐라 자바스크리트에서의 사용 방법 이 글에서는 바닐라 자바스크립트에서 리덕스를 사용하는 기본 방법에 대해 소개한다. 리덕스는 react나 vue, angular 등의 라이브러리 혹은 프레임워크와 결합해서 사용하는 게 일반적이지만, 일단은 리덕스 자체에 집중하기 위해 일반 자바스크립트를 사용했다. 프로젝트 세팅 우선 바벨이나 모듈 등의 설정을 위해서 Create-react-app(CRA)을 사용했다. CRA는 react 앱을 만들기 위해 여러 세팅을 간편하게 해주는 아주 유용한 앱이다. (홈페이지- https://create-react-app.dev/docs/getting-started ) 프로젝트를 생성하자. npx create-react-app my-app cd my-app npm start 그리고 바닐라 자바스크립트 사용을 위해 sr.. [Redux] 사용법부터 이론까지 살펴보는 Redux: 1 기본 컨셉 redux는 오늘날 프론트엔드 생태계에서 가장 인기있는 상태관리 라이브러리다. npm trend를 살펴보면 recoil이나 zustand, zutai, mobx 등과 비교했을 때 더 높은 다운로드 수를 봐도 그 인기를 알 수 있다. 하지만, 리덕스는 모든 곳에서 만능이 아니며, 그 컨셉을 제대로 이해해야 효력을 볼 수 있다. 이 시리즈에서는 리덕스 사용법과 이론에 대해 살펴본다. 상태관리 라이브러리의 등장 배경과 리덕스 FLUX 디자인은 왜 등장했는가 리엑트는 상태관리를 위해서 state를 props와 단방향(하향식) 데이터 바인딩으로 사용한다. 여기서 state는 ui에 삽입되는 데이터 값을 의미한다. 데이터 값이 변환될 때는 다음 과정을 거친다. 이벤트 리스너나 fetch 등의 비동기적 로직에서 se.. 이전 1 다음