Today Hailie Learned

프로젝트를 진행하면서 굳이 전역으로 관리하지 않아도 되는 상태를 전역으로 관리하고 있음을 깨닫고 전역 상태와 지역 상태를 공부하던 중 정리하는 글입니다. 전역으로 상태를 관리하기 위한 대표적인 툴로 Redux, Redux toolkit이 있습니다. 저는 이번 프로젝트에서 Zustand라는 툴로 상태를 전역으로 관리했습니다. 제가 사용한 Zustand에 대해서 간단하게 소개하자면, Redux, Redux toolkit, context API 등과 비교하면 사용하기 정말 쉽고, Provider로 감싸주지 않아도 되서 불필요한 렌더링을 줄일 수 있다는 장점이 있습니다. Zustand 사용법에 대해서는 다른 포스팅에 정리하겠습니다. 💡전역 상태란? 문서의 어떤 곳에서도 접근할 수 있는 영역을 말합니다. 따라서 ..

⭐️리덕스는 꼭 action을 통해서 상태를 변경해야해서 새로운 데이터를 반환해야한다!! 매우 중요!!⭐️ (아래 예시는 vanilla JS에서 쓰는 리덕스 예시 입니다. ) ❌그래서 아래처럼 바로 수정을 하면 안된다. ❌ const reducer = (state = [], action) => { switch (action.type) { case ADD_TODO: return state.push(action.text) case DELETE_TODO: return; default: return state; } }; 🟢이렇게 수정해야한다. 🟢 const reducer = (state = [], action) => { switch (action.type) { case ADD_TODO: return [...st..

1. Redux Toolkit 설치하기 # NPM npm install @reduxjs/toolkit 2. package.json에서 리덕스 라이브러리 삭제하기 (Redux Toolkit에 이미 포함되어 있기 때문에 ) 3. 리듀서 함수 만드는 곳에 slice 만들기 - createSlice import { createSlice } from "@reduxjs/toolkit"; //리덕스 툴킷 시작하기 // createSlice가 createReducer보다 더 강력함 const initialState = { counter: 0, showCounter: true }; // 전역 상태의 slice를 미리 만들어놓기 // 코드를 유지보수하기 좋다. createSlice({ name: "counter", ini..

리덕스 스토어를 리액트 앱에 제공하기 위해서 주로 index.js 파일로 간다. 거기서 전체 앱을 렌더한다. (컴포넌트 트리의 가장 위쪽) 거기서 root 컴포넌트를 렌더한다. 컴포넌트의 대부분이 스토어에 접근해야 한다면, 가장 높은 레벨에서 를 제공해야한다. import React from "react"; import ReactDOM from "react-dom"; import { Provider } from "react-redux"; import "./index.css"; import App from "./App"; import store from "./store/index"; ReactDOM.render( , document.getElementById("root") ); 👇 App에 있는 모든 컴포..

리덕스 처음부터 시작하기 모듈 설치하기 npm i redux react-redux 리덕스를 사용하려면 require로 불러온다. const redux = require("redux"); 저장소 만들기 const store = redux.createStore(); 저장소 만들기 (데이터를 관리함)(관리하는 데이터는 결국 리듀서 함수에 의해 결정된다.리듀서 함수가 새로운 상태 스냅샷을 생성하니까) (리듀서는 액션이 도착할 때마다 새로운 상태 스냅샷을 뱉어내야 한다.) 리듀서 함수 만들기 const counterReducer = (state = { counter: 0 }, action) => { return { counter: state.counter + 1, }; }; ➥ 위 함수 해석: 우리가 자동으로 받..

1. Redux를 왜 쓰는가? 해당 상태를 직접 사용하지 않는 최상위 컴포넌트, 컴포넌트1, 컴포넌트2도 상태 데이터를 가짐 상태 끌어올리기, Props 내려주기를 여러 번 거쳐야 함 애플리케이션이 복잡해질수록 데이터 흐름도 복잡해짐 컴포넌트 구조가 바뀐다면, 지금의 데이터 흐름을 완전히 바꿔야 할 수도 있음 ➥ 상태 관리 라이브러리인 Redux는, 전역 상태를 관리할 수 있는 저장소인 Store를 제공해서 데이터 흐름을 깔끔하게 만들어준다. 2. Redux의 구조 Action 객체 ⇒ Dispatch 함수 ⇒ Reducer 함수 ⇒ 전역 상태 저장소 Store 상태를 변경 ⇒ 화면 리렌더링 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성됩니다. 이 A..

배운점 1. 왜 리덕스를 배울까? 2. 왜 리덕스가 리액트 생태계에서 중요하지? 3. 리덕스를 리액트에서 어떻게 사용하지? 왜 리덕스를 배울까? 리덕스는 크로스 컴포넌트 또는 앱 와이드 상태를 위한 상태 관리 시스템이다. 우리가 상태, 즉 우리 애플리케이션을 변경학 화면에 표시하는 데이터를 관리하도록 도와준다. 리덕스는 우리가 그런 데이터를 다수의 컴포넌트나 심지어는 앱 전체에서 관리하도록 도와준다. 앞에서 배운 state를 3가지로 구분할 수 있다. 1. local state : 데이터가 변경되어서 하나의 컴포넌트에 속하는 UI에 영향을 미치는 상태. (useState() 나 useReducer() 사용) 2. cross-component state : 하나의 컴포넌트가 아니라 다수의 컴포넌트에 영향을..