Redux5 [TIL 2023.07.04] Redux Toolkit / 옵셔널 체이닝? 💻오늘 배운 내용 Redux Toolkit 리덕스를 개량한 것 코드는 더 적게, 그리고 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든 것이 리덕스툴킷 (a.k.a RTK) 툴킷 설치하기 yarn add react-redux @reduxjs/toolkit Action Value와 Action Creator를 이제 직접 생성해주지 않고, Action Value, Action Creator, Reducer가 하나로 합쳐졌다 =>Slice 라는 API를 사용 // src/redux/modules/counterSlice.js import { createSlice } from "@reduxjs/toolkit"; const initialState = { number: 0, }; const counterSlic.. 2023. 7. 4. [TIL 2023.07.03] Redux란 무엇인가 💻오늘 배운 내용 Redux란 무엇인가 Redux를 주로 사용하면서 과제나 프로젝트를 진행하고 있는데 아직도 개념이 제대로 잡힌 것 같지 않아서 다시 한번 정리 하는 시간을 가져봤다. 리덕스의 구성요소 Store : 모든 전역 state들을 관리하는 단 하나의 상태 저장소 (→ 단 하나의 객체) store: { todos, auth } store 내부의 리듀서들로부터 각각 최신 상태를 제공받는다. Reducer : state 변경 함수 매개변수로 기존상태와 액션객체를 받음 상태 변경 후 최신 상태를 Store에 제공 (리턴) Action : { type, payload } 형태의 객체 리듀서 함수에게 전달되는 인자 리듀서에게 요구할 상태변경 작업에 대한 정의를 나타내는 객체 (상태 변경 요청서) type.. 2023. 7. 3. [WIL 2023.06.25] 내배캠 6주차 📝 Situation(상황): 이번주 목표 Styled Components를 배워보고, 활용할 수 있다. 콜백, promise, async/await 차이를 설명할 수 있다. 이들을 활용해 코드를 구현할 수 있다. 리덕스를 사용한 전역 상태 관리를 자유롭게 활용할 수 있으며 전역 상태의 필요성을 설명할 수 있다. React-router-dom의 핵심 개념과 관련 hooks에 대해 이해할 수 있다. Dynamic route 기법과 useParam hook을 이용하여 동적 라우팅을 구현할 수 있다. 👀 Task(임무): situation 중 문제들 이전에 만들었던 Todo List에 1. 설정했던 state를 develop해서 Redux를 이용한 전역 데이터로 관리해보기 2. React Router Dom을.. 2023. 6. 25. [TIL 2023.06.22] Redux에 대하여 2 (Action Creator, Payload, useDispatch, Ducks 패턴) 💻오늘 배운 내용 Action Creator 'todos' 라는 모듈이 하나 있다고 치자. 액션객체의 value를 변경할 일이 생긴다면? 만약에 프로젝트 규모가 굉장히 커서 수정할 곳이 100군데라면? // Action value const ADD_TODO = 'todos/ADD_TODO'; // Action Creator export const addTodo = (payload) => { return { type: ADD_TODO, payload, }; }; const initialState = { todos: [], }; const todos = (state = initialState, action) => { switch (action.type) { case ADD_TODO: return { todo.. 2023. 6. 23. [TIL 2023.06.21] Redux에 대하여 1 (개념 및 초기셋팅~Module 만들기 및 스토어에 연결) 💻오늘 배운 내용 1] Redux 전역 상태관리 라이브러리 “중앙 state 관리소”를 사용할 수 있게 도와주는 패키지이다. useState로 생성한 State는 Local State이고, 리덕스에서 생성한 State는 Global State라고한다. useState로 상태를 관리한 경우, 어떤 State를 컴포넌트 간에 공유하고자 할때 반드시 부모에서 자식으로 한방향 정보전달만 가능했기 때문에 중간에 불필요한 과정이 발생하기도 했다.(props drilling) 따라서 리덕스는 useState를 통해 상태를 관리했을 때 발생하는 이러 불편함을 일부 해소시켜준다. 동작원리 리덕스의 동작원리는 액션, 디스패치, 리듀서로 이루어진다. Action type 필드를 가진 자바스크립트 객체다. 쉽게 생각해서, 어.. 2023. 6. 22. 이전 1 다음
