useReducer 란? React hooks useReducer란?

useReducer 란? React hooks useReducer 란?

 

저번 포스팅으로 useContext에 관해 알아보았습니다.

이번 시간에는 useReducer를 알아보고 useContext와 함께 사용되는 예시를 알아보겠습니다.

사실 useContext를 사용 시 useReducer 없이도 충분히 문제없이 사용 가능합니다.

하지만 useReducer를 통해서 좀더 깔끔하고 이해하기 쉽게 알아보겠습니다.

 

 

1. useReducer란?
2. useContext와 사용 방법
3. 마치며

 

1. useReducer란?

 

우리는 상태를 업데이트할때 useState라는 훅을 이용합니다.

useReducer 또한 상태를 관리할 때 사용하는 훅이며 특히나 useContext와 같이 사용되는 경우가 많습니다.

 

기본적으로 useReducer를 어떻게 이용하는지 알아보시죠.

 

const reducer = (state : {name}, action) => {
	return {name : action.payload};
};

const [state, dispatch] = useReducer(reducer, {name : ""});

 

이렇게 기본적으로 사용 하실 수 있습니다.

그리고 state에 name 값을 변경하기 위해서는 아래와 같이 이용 가능합니다.

dispatch({ payload: "Mike" });

 

이렇게 간단하게 선언 및 사용 가능합니다.

그렇다면 이번에는 가장 빈번하게 사용되는 useContext와 함께 알아보겠습니다.

useContext 자체로도 이미 글로벌하게 값을 이용 가능하지만 useReducer를 통해서 훨씬 더 쉽고

깔끔하게 사용가능합니다. 그럼 예시를 보시겠습니다.

 

 

2. useContext와 사용 방법

 

 

import { useReducer, createContext } from 'react';

export const NameContext = createContext({
  name: '',
  changeName: (name: string) => {},
});

const reducer = (state: { name: string }, action: any) => {
  return { name: action.payload };
};

const NameProvider: React.FC<React.ReactNode> = ({ children }) => {
  const [state, dispatch]: any = useReducer(reducer, {
    name: '',
  });

  const changeLan = (name: string) => {
    dispatch({ payload: name });
  };

  return (
    <NameContext.Provider value={{ name: state.name, changeLan }}>
      {children}
    </NameContext.Provider>
  );
};

export default NameProvider;

 

  자 이번에는 useContext와 함께 사용해보았습니다.

useContext를 아직 모르시거나 익숙하지 않으신 분은 제 블로그에 useContext에 관한 게시물을 확인해주시기 바랍니다.

 

https://ko-de-dev-green.tistory.com/67

useContext란? React hooks useContext란?

 

짧게 설명을 드리자면  NameContext의 name과 changeName이라는 함수는 글로벌하게 사용이 가능합니다.

즉 NameContext를 import 한 모든 컴포넌트들은 글로벌하게 값을 변경 가능하고 사용 가능합니다.

name을 이용하면 값을 가져올 수 있고 changeName이라는 함수를 사용하면 name의 값을 업데이트할 수 있는 것입니다.

처음 사용하신다면 다소 어려울 수 있습니다.

하지만 조금만 익숙해지신다면 훨씬 편하고 쉽게 사용 가능하실 것입니다.

다시 한번 말씀드리지만 useContext에 useState를 이용하는 것도 가능합니다. 하지만 useReducer를 이용하시는 것을 추천드립니다.

 

 

3. 마치며

언제나 제 글을 읽어주시고 방문해주시는 여러분 감사합니다.

요 근래 계속 이래저래 바쁘고 피곤해서 글을 자주 못 올리고 있네요.

 

여러분들이 제 글을 통해 조금이나마 공부하시고 배윌 수 있다면 그걸로 기쁩니다.

react hooks에서는 이외에도 많은 훅들이 존재합니다. 또한 스스로 커스텀 훅을 만들어 이용하실 수도 있습니다.

다음 시간에는 어떻게 커스텀 훅을 만들고 어떤 경우에 필요한지 알아보도록 하겠습니다.

항상 도전하시는 여러분의 모습이 너무 멋진 것 같습니다.

항상 긍정적인 마인드로 꾸준히 하신다면 어느새 일취월장한 자신의 실력을 보실 수 있지 않을까 싶네요.

그러면 그날이 올 때까지 서로 같이 공부하도록 합시다!

항상 처음이 가장 힘든 법입니다.

항상 도전하시기 바랍니다.

 

완벽한 준비란 없다, 완벽한 준비란 영원히 시작하지 않는 것과 같다.

Es gibt keine perfekte Vorbereitung.

Perfekte Vorbereitung ist das Gleiche, wie nie anzufangen.