useReducer (reducer, action, dispatch의 관계)

사용 js 문법: fill, map

//기존 useState에 담았던 값들을 useReducer를 이용해서 담는다.

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

//initialstate선언
const initialstate= {
//state에 담을 값들
a : 0
b: ''
//(원래 const [a, setA] = useState(0), const [b, setB] = useState('')
로 선언했던 것)
}

//변수는 다시 선언해주는 것을 추천 (커뮤니티의 룰) props데이터를 써야할 때 export로 빼준 후 자식에 가서 구조분해할당
const 변수1 = '변수1';

//reducer선언
const reducer = (state, action) =>{
switch(action.type){
case 변수1 :

  //객체로 반환. 리액트 공통 
  return{
  
      ...state,   //객체를 새롭게 복사하는 spread문법 => 얕은복사 (불변성) 
    a : state.a === 0 ? 1 : 0, 과 같이 initialstate에 담긴 값을 바꾼 후 반환,
    b : action.b
      
  }
}

}
const ComponentA = () => {

//useCallback은 함수자체를 기억
//useMemo는 반환된 값을 기억한다.
const onClickB = useCallback(() =>{

dispatch({type: 변수1, b: '1'})

//dispatch안에 action개체({type: '', return값(여기선 b) : 1}) => dispatch하면 action을 실행
}, [])

return(
<>

<div
 onClick={onClickB}>
{state.b && <div>값은 {state.b}입니다.</div> }