임머를 통한 더 나은 국가 관리 방법

반응형

임머가 뭐야?

이머의 작동 방식

//Syntax for using Immer 
updatePerson(draft => {
    draft.places.city = 'Lagos';
});

생산물 사용

 

상태를 임머로 바꾸기

usState + Imper:

import React, { useCallback, useState } from "react";
import produce from "immer";
const TodoList = () => {
    const [todos, setTodos] = useState([
      {
              id: "React",
              title: "Learn React",
              done: true
      },
      {
              id: "Immer",
              title: "Try Immer",
              done: false
      }
        ]);
  const handleToggle = useCallback((id) => {
        setTodos(
                produce((draft) => {
                          const todo = draft.find((todo) => todo.id === id);
                          todo.done = !todo.done;
                })
              );
  }, []);
  const handleAdd = useCallback(() => {
        setTodos(
                produce((draft) => {
                          draft.push({
                                      id: "todo_" + Math.random(),
                                      title: "A new todo",
                                      done: false
                          });
                })
              );
  }, []);
  return (<div>{* List of Todo */}</div>)
}

Imer 사용

import React, { useCallback } from "react";
import { useImmer } from "use-immer";
const TodoList = () => {
    const [todos, setTodos] = useImmer([
      {
              id: "React",
              title: "Learn React",
              done: true
      },
      {
              id: "Immer",
              title: "Try Immer",
              done: false
      }
        ]);
  const handleToggle = useCallback((id) => {
        setTodos((draft) => {
                const todo = draft.find((todo) => todo.id === id);
                todo.done = !todo.done;
        });
  }, []);
  const handleAdd = useCallback(() => {
        setTodos((draft) => {
                draft.push({
                          id: "todo_" + Math.random(),
                          title: "A new todo",
                          done: false
                });
        });
  }, []);

 

리듀서와 함께 이머 사용

useReducer + Immer

import React, {useCallback, useReducer} from "react"
import produce from "immer"
const TodoList = () => {
      const [todos, dispatch] = useReducer(
                produce((draft, action) => {
                              switch (action.type) {
                                case "toggle":
                                                      const todo = draft.find(todo => todo.id === action.id)
                                                                          todo.done = !todo.done
                                                      break
                                case "add":
                                                      draft.push({
                                                                                id: action.id,
                                                                                title: "A new todo",
                                                                                done: false
                                                      })
                                                      break
                                default:
                                                      break
                              }
                }),
                [
                              /* initial todos */
                          ]
            )
      const handleToggle = useCallback(id => {
                dispatch({
                              type: "toggle",
                              id
                })
      }, [])
      const handleAdd = useCallback(() => {
                dispatch({
                              type: "add",
                              id: "todo_" + Math.random()
                })
      }, [])
      }

ImerReducer 사용

import React, { useCallback } from "react";
import { useImmerReducer } from "use-immer";
const TodoList = () => {
    const [todos, dispatch] = useImmerReducer(
          (draft, action) => {
                  switch (action.type) {
                    case "toggle":
                                const todo = draft.find((todo) => todo.id === action.id);
                                todo.done = !todo.done;
                                break;
                    case "add":
                                draft.push({
                                              id: action.id,
                                              title: "A new todo",
                                              done: false
                                });
                                break;
                    default:
                                break;
                  }
          },
          [ /* initial todos */ ]
        );

 

결론

독립적인 구성 요소를 사용하여 10배 이상의 개발 실현