useReducer 다시 찾아볼것

useReducer

• 상태관리의 크기가 커지고 관리방식이 복잡해 질때 사용 useState의 대체

const [data, dispatch] = useReducer(diaryReducer, [])

 

• useReducer 의 배열의 비구조화 할당에 들어오는 첫번째 인자는 state의 값, 
  두번째 인자로는 무조건 dispatch를 사용해야한다.  -> const [data, dispatch]
• useReducer 의 인자로는 상태변화를 처리하는 함수를 넣고
  두번재로는 state의 초기값을 넣는다. -> useReducer(diartReducer, [])

const reducer = (state, action) => {
  switch (
    action.type 
  ) {
    case "INIT": {
      return action.data;
    }
    case "CREATE": {
      const createdDate = new Date().getTime();
      const newItem = {
        ...action.data,
        createdDate,
      };
      return [newItem, ...state];
    }
    case "REMOVE": {
      return state.filter((item) => item.id !== action.data);
    }
    case "MODIFY":{
      return state.map((item) => item.id === action.data.targetId ? {...item, content: action.newContent} : item);
    }
    default:
      return state; 
  }
};

function App() {
  const [data, dispatch] = useReducer(reducer, []); 
  const dataId = useRef(0);

  const getData = async () => {
    const response = await fetch(
      "https://jsonplaceholder.typicode.com/comments"
    );
    const data = await response.json();
    const initData = data.slice(0, 20).map((item) => {
      return {
        author: item.email,
        content: item.body,
        emotion: Math.floor(Math.random() * 5) + 1,
        createdDate: new Date().getTime(),
        id: dataRef.current,
      };
    });
    dispatch({ type: "INIT", data: initData });
  };
  useEffect(() => {
    getData();
  }, []);

  const onCreate = useCallback((author, content, emotion) => {
    dispatch({
      type: "CREATE",
      data: { author, content, emotion, id: dataId.current },
    });
    dataId.current += 1;
  }, []);

  const onRemove = useCallback((targetId) => {
    dispatch({ type: "REMOVE", data: targetId });
  }, []);

  const onModify = useCallback((targetId, newContent) => {
    dispatch({ type: "MODIFY", data: { targetId, newContent } });
  }, []);

 

• const reducer 는 두개의 파라미터를 받는다 첫번재는 상태변화가 일어나기 직전의 state
• 두번째는 어떤 상태변화를 일으켜야하는지에 대한 정보를 담는 action객체
• switch문을 사용해 action객체에 담긴 type에 따라 다른 작업을 수행한다. 

const reducer = (state, action) => {
  switch (
    action.type 
  ) {
    case "INIT": {
      return action.data;
    }
    case "CREATE": {
      const createdDate = new Date().getTime();
      const newItem = {
        ...action.data,
        createdDate,
      };
      return [newItem, ...state];
    }
    case "REMOVE": {
      return state.filter((item) => item.id !== action.data);
    }
    case "MODIFY":{
      return state.map((item) => item.id === action.data.targetId ? {...item, content: action.newContent} : item);
    }
    default:
      return state; 
  }
};

 

라고 하는데 아직 이해하기 어렵다.. 일단 보류.. 다시 천천히 읽어봐야겠따