내가 보려고 만든 개발 공부 일지

React - useReducer 본문

React

React - useReducer

kwangsunny 2021. 7. 16. 23:53
반응형

앱이 커질수록 상태변수도 많아질 것이고, 일일이 갱신해주는 코드도 많아져서 상태관리가 힘들고 소스가 난잡해질 것이다.

이런 상황에서 useReducer 는 상태들을 한곳에 모아놓고 관리할 수 있게 해주는 훅이다.

예제 )

const initialState = { userInfo : ~ , userList : ~ };

function reducer(state, action){  ---> C
    switch(action.type){
        case 'CHANGE_INPUT':
            return {
                ...state,
                userInfo : {
                    ...state.userInfo,
                    [action.name] : action.value
                }
            };
        default:
            break;
    }

}

function App(){
    const [state, dispatch] = useReducer(reducer, initialState);  ---> A
    const {userList, userInfo} = state;
    
    const onChange = (e)=>{
        const {name, value} = e.target;
        dispatch({  ---> B
            type: 'CHANGE_INPUT',
            name,
            value
        });
}

useReducer 선언 형태는 A 같고, B 통해 상태를 업뎃할 함수C 부르고 C 상태값을 갱신한다.

 

reducer : dispatch 호출하면 수행되는 함수

initialState : 상태변수의 초기값(1 or 여러 , 사용할 상태값을 모아놓은 변수)

state : initalState 할당된 상태변수

dispatch : reducer 호출하는 함수

 

dispatch 호출하면 reducer 함수가 불린다. 이떄 넘겨주는 파라미터로 type (행위를 정의) 필요한 넘겨주는데,

어떤 행위를 할지 정의한 객체라해서 action 객체라고 부른다.

(저렇게 type 포함한 객체를 넘기는건 관행일뿐 개발자 맘대로 어떤값이든 넘겨도됨)

 

reducer 함수는 상태값 state dispatch 에서 넘겨준 action 객체를 인자로 받게되고 switch문에서 type값에 따라 상태값을 갱신해준다

반응형

'React' 카테고리의 다른 글

React - useReducer  (0) 2021.07.16
useState 기본 개념  (0) 2021.07.02
Hooks 사용 규칙  (0) 2021.07.02
props.children  (0) 2021.07.02
React 컴포넌트 함수형 vs Class형  (0) 2021.07.02
0 Comments
댓글쓰기 폼