[React.JS] 리액트Hooks. useReducer 정의 및 활용 (2)

* useState  vs  useReducer ? 

--> 컴포넌트에서 사용하는 상태 값을 관리할시, useState 또는 useReducer를 활용할 수 있다. 컴포넌트에서 관리하는 상태값이 (String, Number, Boolean)과 같은 단순한 형태일 시 useState를 활용하는 것이 관리적인 면에서 효율적이며 컴포넌트에서 관리하는 상태값이 복잡한 형태로 되어있을 시 useReducer를 사용하는 것이 효율적이다. useReducer는 reducer() 함수내부에서 복잡한 여러 상태 값에 관하여 다중처리 가능하다.   

 

Cf). 

function reducer(state, action) {
    switch(action.type) {
       case 'ACTION1': 
          return {

             setGoodLi..   // 상태 값(상품목록)에 관하여 비즈니스로직 처리..

             setUser..      // 상태 값(유저)에 관하여 비즈니스로직 처리..

          }

        ...
    }
}

"dispatch( "{ Action Object }" ); --> reducer Function Call"

---

useReducer Exercise..

 

 

 

1. 하위 컴포넌트 선언 (CreateGoods, GoodsList)

App.js에서 호출 할 하위 컴포넌트를(CreateGoods, GoodsList) 선언.

   - CreateGoods 컴포넌트: 새 상품정보를 등록하는 View

   - GoodsList 컴포넌트: 상품의 정보를 출력하는 View

 

 

 

2. App.js 컴포넌트 수정 (useState --> useReducer 상태관리 변경)  

Step1. react로 부터 useReducer 함수 Import..

 

Step2. 함수형 컴포넌트(App) 외부에 useReducer에 의해 관리되는 상태(initialState) 선언 및 초기화.

 

Step3. 함수형 컴포넌트(App) 외부에 리듀서함수(reducer) 선언 

reducer함수의 첫번째 파라미터는 "현재상태" 이며, 두번째 파라미터로 "액션객체"를 받는다. Action객체의 Type속성에 따라 비즈니스로직 수행(상태 업데이트) 후 결과를 반환한다.

  - Action객체의 .Type "CHANGE_INPUT" :  상품명, 상품가격을 각 입력받는 Input태그들의 values값 변경

  - Action객체의 .Type "CREATE_GOODS" :  기존 상품리스트에 새로 입력한 상품정보를 추가

  - Action객체의 .Type "TOGGLE_GOODS" :  선택한 상품에 대하여 상품의 속성(isnew) 값 반전 (True/False) 

  - Action객체의 .Type "REMOVE_GOODS" :  선택한 상품에 대하여 상품목록에서 제거

 

Step4. 함수형 컴포넌트(App) 내부에 useReducer() 선언. 

 useReducer 구조  

const ["현재상태", "액션발생시 호출함수"] = useReducer("리듀서 함수", "초기상태");

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

 

Step5. 함수형 컴포넌트(App) 내부에 이벤트 처리함수 생성(onChange, onCreate, onToggle, onRemove)

각 이벤트처리함수 내부에서 공통으로, dispatch( "{ Action객체 }" ); 선언하였다. 이는, useReducer에 의해 관리되는 상태 업데이트를 처리하는 reducer() 함수를 호출하는 것이다. Action객체는 reducer() 함수 내 에서 switch~case문의 구분 값으로 처리 될, type속성 및 이벤트 함수 별 비즈니스로직을 처리하는데 필요한 추가속성이 선언되어 있다.

 

 ** 이벤트처리함수 ** 

  onChange: dispatch( { type: "CHANGE_INPUT" } )

     --> reducer() { switch~ case "CHANGE_INPUT": .. }  //리듀서 함수 내부의 "CHANGE_INPUT" 영역 수행..

  onCreate: dispatch( { type: "CREATE_GOODS" } )

     --> reducer() { switch~ case "CREATE_GOODS": .. }  //리듀서 함수 내부의 "CREATE_GOODS" 영역 수행..

  onToggle: dispatch( { type: "TOGGLE_GOODS" } )

     --> reducer() { switch~ case "TOGGLE_GOODS": .. } //리듀서 함수 내부의 "TOGGLE_GOODS" 영역 수행..

  onRemove: dispatch( { type: "REMOVE_GOODS" } )

     --> reducer() { switch~ case "REMOVE_GOODS": .. } //리듀서 함수 내부의 "REMOVE_GOODS" 영역 수행.. 

 

Step6.  하위컴포넌트(CreateGoods, GoodsList)에 위 생성된 상태 값과 이벤트 처리함수를 Props로 전달.

 

 

 

3. index.js수정 (App컴포넌트 렌더링 ) 

--> Counter.js 컴포넌트를 제거, App컴포넌트 렌더링..

 

 

-- 렌더링 구조

index.js

[

    ReactDOM.render( App.js )

    [

        CreateGoods.js     

        GoodList.js     

           L Goods Component - 상품의 수 만큼 호출    

    ]

]

 

 

4. useReducer 로컬테스트

Chrome Browser

 

 

exit..