DreamCoding에 돈을 쏟은게 얼마인데...
적어도 에어팟 맥스는 살 수 있을 정도인 것 같은데,
듣지 않은 인강은 한 가득 이다.
미룬 인강 듣기 시작 ~!
상태 관리
내가 생각하기에 리액트는 데이터의 변경에 따라 변화 되는 컴포넌트들이 가상 돔을 거쳐 UI에 반영하는 도구 정도라고 생각한다.
컴포넌트는 재사용이 가능한 모듈이며 이 컴포넌트는 각 상태를 가지고 있다.
리액트에서의 상태 관리는(state) 컴포넌트의 현재 상황에 대한 정보를 나타낸다.
상태를 관리 해주기 위해선 여러가지의 라이브러리들은 아래와 같다.
-
Redux
-
MobX
-
Immer
Redux
애플리케이션의 전체 상태를 store에서 관리하며 action 을 dispath 하여 상태를 변화시키는 패턴을 사용한다. 이러한 액션들은 reduce을 통해 처리되며 새로운 상태가 생성된다.
Reducer
현재 상태와 액션을 입력으로 받아 새로운 상태를 반환하는 순수 함수.
함수형 프로그래밍에서 비롯된 패턴이다. Redux와 같은 상태 관리 라이브러리에서도 사용 된다.
결국, Reducer = 상태 변환기와 같은 역할을 하는 함수
useReducer
React의 Hook중 하나 이다. 복잡한 컴포넌트의 상태를 관리 할 수 있게 해주며, Redux와 비슷한 방법으로 작동한다. 현재 상태와 디스패치 함수를 반환하고 디스패치 함수는 액션을 발생 시키는데 사용되며, 액션은 우리가 정의한 리듀셔 함수에 의해 처리된다.
reducer는 상태 변화를 로직을 관리하는 함수이며, useReducer는 리듀서 함수를 사용하여 컴포넌트의 상태를 관리하는 리액트 훅이다.
useState 대신 왜 사용 하는가
다수의 하윗값을 포함하는 복잡한 정적 로직을 만드는 경우나 다음 state가 이전 state에 의존적인 경우에 보통 useState보다 useReducer를 선호합니다. 또한 useReducer는 자세한 업데이트를 트리거 하는 컴포넌트의 성능을 최적화할 수 있게 하는데, 이것은 콜백 대신 dispatch를 전달 할 수 있기 때문입니다.
React에서의 상태 관리를 해줄때 변경된 상태를 업데이트 할때, 만약 상태가 여러 서브값을 가질때(복잡 한 데이터 구조).
또는 상태를 관리하는 코드를 재사용하고 싶을때
const state = {
user : {
name : 'yujin',
age:25,
},
posts: [posts1, posts2,posts3],
theme: 'dark',
----
function reducerState ( state, action ) {
switch(action.type){
case 'SET_USER_NAME' :
return {...state,user:{...state.user,name:action.name}};
case 'ADD_POST' :
return {...state,posts:[...state.posts,action.posts]};
case 'SET_THEME' :
return {...state,theme: action.name};
default:
return state;
}
}
----
import {useReducer} from 'reat';
import reducerState form './reducerState';
function MyComponent(){
const [state, dispatch]= useReducer(reducer,initialState)
//dispatch를 사용해서 액션을 발생 시킨다
// reducer 함수를 통해 새로운 상태를 생성하게 된다.
dispatch({type:'ADD_POST',posts:[actions.posts]});
