[React] 리액트 useReducer

※ 본 포스팅은 윈도우11 환경에서 패스트 캠퍼스 강의를 수강하며 정리한 내용입니다.

 

---

 

목차

 

useReducer

useReducer와 useState

import

 

---

 

---

[useReducer]

리액트에서 컴포넌트의 상태 관리를 위해 기본적으로 가장 많이 사용하는 Hook은 state이다.

공식 문서에서 언급된 것처럼 useReducer는 상태(state)를 관리하고 업데이트하는 useState를 대체할 수 있는 Hook이다.

useState와 다르게 useReducer는 한 컴포넌트 내에서 상태(state)를 업데이트하는 로직 부분을 그 컴포넌트로부터 분리되는 것을 가능하게 함으로써 코드의 최적화를 이루게 해 준다.

좀 더 복잡한 상태관리가 필요한 경우 useReducer를 사용할 수 있다.

useReducer는 이전 상태와 action을 합쳐 새로운 state를 만드는 조작을 말한다.

콜백 대신 dispatch를 전달할 수 있기 때문이다.

---

[useState와 useReducer]

useState	useReducer
컴포넌트 내부에 상태(state) 업데이트 로직이 존재	컴포넌트 외부에 상태(state) 업데이트 로직이 존재
관리해야할 상태(state) 가 단순할 경우	관리해야할 상태(state)가 여러개인경우
간단한 상태(state)로직을 다룰때 사용	좀 더 복잡한 상태(state)로직을 다룰 때
상태(state)를 업데이트할 때 이전 상태(state)를 덮어쓴다.	이전 상태(state)를 변경하지 않고 새로운 상태(state)를 생성
상태(state)가 단순한 숫자, 문자열 또는 boolean 값일 경우	현재는 단일 상태(state) 값만 관리하지만 추후 유동적일 가능성이 있는 경우
컴포넌트 내부에서 변경이 가능한 상태를 다룰 때	여러개의 연관된 상태를 함께 다룰 때
설정하고싶은 다음상태를직접 지정해주는 방식으로 상태를 업데이트 [ex]setUsers(users=>users.concat(user))	action이라는 객체를 기반으로 상태를 업데이트한다. [ex] dispatch({type:"DECREMENT"})
컴포넌트에서 상태를 변경하면, 해당 컴포넌트가 다시 렌더링 된다.	state와 action을 받아서 새로운 상태를 반환하는 reducer 함수를 사용
컴포넌트에서 상태가 변경되면 컴포넌트가 화면에 다시 그려져서 새로운 상태가 반영된다.	스케일이 큰 프로젝트의 경우
사용자의 입력에 따라 컴포넌트가 동적으로 변경되어야 할 때	컴포넌트의 상태 업데이트 로직을 다른 파일로 분리하고 싶을
상태를 초기화 하거나 업데이트 할 때	다른 파일에서 reducer 함수를정의하여 상태를 다룰 수 있다.

action 객체 : 업데이트할 때 참조하는 객체

 

 

 

---

[import]

// <useReducer> //
import React,{useReducer,useCallback} from "react";
function reducer(state,action){ // state 업데이트 외부 로직
    //수행할 문장
}

function Component(){ // 컴포넌트
    const [state,dispatch] = useReducer(reducer,initialState,init);
    const onChange = useCallback(e=>{//예시
    	dispatch({type : 'CHANGE_INPUT'});
 	},[])
    return{
        <>
        <div onChange={onChange}></div>
        </>
    }
}
// state 업데이트 로직을 분리 -> 컴포넌트 외부에 state 업데이트 로직이 존재
export default Component;

 

useState 사용

 

// <useState> //
import React,{useState} from "react";

function Component(){// 컴포넌트
    const [number,setNumber] = useState(0);
    const a = () =>{//state 업데이트 내부 로직
        setNumber((preNumber)=>preNumber-1);
    }
    //컴포넌트 내부에 State 업데이트 로직이 존재
}

 

 

<구성 요소>

1. useReducer 함수
2. action 객체
3. dispatch
4. reducer 함수

 

---

< 1. useReducer 함수 >

const [state, dispatch] = useReducer(reducer, initialState, init);

• state : 컴포넌트에서 사용할 상태
• dispatch : reducer 함수를 실행시키며 컴포넌트 내에서 상태(state)의 업데이트를 일으키기 위해서 사용하는 함수
• reducer :  useReducer 함수의 첫 번째 인자로 컴포넌트 외부에서 state를 업데이트하는 로직을 담당하는 함수
• initialState :  초기 state
• init :  초기함수

 

< 2. action 객체 >

action은 업데이트를 위한 정보를 가지고 있는 것이다.

dispatch의 인자가 되며 reducer함수의 두 번째 인자인 action에 할당된다.

dispacth({type:"decrement"})

여기서 {type:"decrement"}이 action 객체이다.

 

< 3. dispatch >

reducer 함수를 실행시킨다.

dispatch 함수의 인자로써 업데이트를 위한 정보를 가진 action을 이용한다.

action을 이용하여 컴포넌트 내에서 state의 업데이트를 일으킨다.

 

< 4. reducer 함수 >

dispatch 함수에 의해 실행된다.

컴포넌트 외부에서 state 업데이트하는 로직을 담당

함수 인자로는 state와 action을 받게 된다.

state와 action을 활용하여 새로운 state를 반환한다.

 

useReducer 함수의 첫 번째 파라미터로 입력된 reducer함수는 현재의 state와 action은 인자로 받게 되는 이 action 값에 근거하여 기존의 state를 대체(replace) 할 새로운 state를 반환(return) 한다.

기존의 state를 새로운 state로 대체한다.

기존의 state르 변경하거나 추가하거나 덮어쓰지 않는다.

 

 

---

잘못된 정보는 댓글에 남겨주시면 감사하겠습니다!😊

댓글과 좋아요는 큰 힘이 됩니다!

 

[ 참고자료 ]

 

https://react.vlpt.us/basic/20-useReducer.html

20. useReducer 를 사용하여 상태 업데이트 로직 분리하기 · GitBook