useReducer

유관희·2022년 10월 23일
0

→ Open in Slid


useReducer image

‏‏‎ ‎

useReducer image

‏‏‎ ‎

useReducer image

‏‏‎ ‎

useReducer image

‏‏‎ ‎

useReducer image

‏‏‎ ‎

useReducer image

useReducer image

* reducer - state update하는 역활 (은행)

* dispath - state 업데이트를 위한 요구

* action - 요구 내용

useReducer image

* reducer - state update하는 역활 (은행)
* dispath - state 업데이트를 위한 요구
* action - 요구 내용 

const reducer = {state, acticn} => {};

const [money, dispatch] = useReducer(reducer,0)

//reducer 에서 money 는 state 이고  dispathch로 내보낸다.  
// useReducer(reducer,0) 에서 reducer 는 실행할 함수이고 , 0은 
// money 의 초기값이다. 
// 위의 reducer 함수는 2갱의 props를 받는데 state는 money의 상태이고 
// action 은 실행할 명령어이다. 
// money 는 오직 reducer 에서만 작동되고 money를 변화시키려면 
// dispatch 를 이용해야한다. 즉 dispatch 안에 action을 넣는다. 

useReducer image

reducer 함수를 움직이기 위해 버튼 명령에 dispatch 를 두었더니 콘솔창에

'reducer 가 일을 합니다!' 라고 나왔다.

useReducer image

const reducer = (state, action) =>{
  console.log('reducer 가 일을 합니다!',state,action);
}
//console 에 state,action 을 넣었다. 그리고 콘솔창을 보니 
// 0, undefined 가 나왔다. 0은 money의 state 갑싱고 undefined 는 
// 버튼에서 dispathch()  값이 없기에  undifined 가 나온것이다. 

useReducer image

useReducer image

dispathch 애는 객체로서 type 에는 하려는 것의 이름과 payload 에는 넘길 값을 정한다.

ex) dispatch ({ type: 'deposit', payload: number });

useReducer image

const reducer = (state, action) =>{
  console.log('reducer 가 일을 합니다!',state,action);
  
  return state + action.payload;
}
// reducer의 return 된 값을 보면 state 는 money 의 초기값이라 0이고
// action.payload 값은 위의 payload 값이 3000 이다. 따라서
// return 0 + 3000  이라 return return 값은 3000 이다. 

useReducer image

const reducer = (state, action) =>{
  console.log('reducer 가 일을 합니다!',state,action);
  
  return state + action.payload;
}
reducer 에는  type 에 따라 여러 가지 기증을 할수 있다. 0

switch(action.type) {
  case 'deposit':
    return state + action.payload;
  default :
    return state;
    
  }

‏‏‎ ‎

switch(action.type) {
  case 'deposit':
    return state + action.payload;
  case 'withdraw':
    return state - action.payload;  
  default :
    return state;
    
  }

<button onClick={()=>{
  dispatch({ type: 'withdraw', payload: numner})
}}>

*출금!

이번에는 변수들 모아서 한번에 제어하려는 법이다.

const ACTION_TYPES = {
  deposit: 'deposit',
  withdraw : 'withdraw',
}

switch(action.type) {
  case ACTION_TYPES.deposit:
    return state + action.payload;
  case ACTION_TYPES withdraw:
    return state - action.payload;  
  default :
    return state;
    
  }

useReducer image

useReducer image

useReducer image

useReducer image

useReducer image

useReducer image

useReducer image

* Warning: Each child in a list should have a unique "key" prop.

이것은 각 자식 요소들은 key 값을 가져야 한다고 했기 때문에 key 값도 props 로 넣어 둔다.

useReducer image

이제 이름을 입력해 보자! 이름을 입력해서 학생 수를 높이기 위해서는 studentsInfo를 움직여야 하므로 reducer를 변화시켜야 한다.

<button onCliack={()=>{
  dispatch({type: 'add-student', payload: {name}})
}}>추가</button>

const reducer = (state, action) =>{
  switch(action.type):
    const name = action.payload.name;
    const newStudent = {
        id: Date.now(),
        name: name, // 객체 이름이 서로 같을 경우 하나로 쓸수 있다. 
        isHere:false,
    };
  	return {
      count = state.count +1,
      students = [...state.students, newStudent],
    };
}
  

* student name 지우기

지우는 버튼은 Student 컴포턴트에 있어서 지울 수 있는 명령인 action 값을 움직일 수 있게 하기 위해

Student 컴포넌트에 dispatch 값을 넘겨 준다. id 값을 넘겨주는 것은 delete 할 이름을 선택 할 수

있게 하기 위해서이다.

case 'delete-student':
	return {
      count : state.count -1,
      students: state.students.filter(student => 
         student.id !== action.payload.id),
    }

students: state.students.filter(student => student.id !== action.payload.id)

이것은 filter 기능으로 student.id 와 action.payload.id 값이 같지 않은 부분을 가지고 같은 부분을 걸러내는 방식이다.

‏‏‎ ‎

* 학생의 출석부 기능

<Student key={student.id}

name={student.name} dispathc={dispatch} id={student.id} isHere={student.isHere} />

useReducer image

useReducer image

‏‏‎ ‎

<span
	style={{
           textDecoration: isHere ? 'line-through':'none',
           color : isHere ? 'gray':'black',
          }}
    onClick={()=>{
      dispatch({type:'mark-student',payload:{id}})
    }}
    >

학생들의 출석을 하면 줄을 긋고 안하면 줄을 지운다. 그리고 색도 바뀐다. 이 모든 것을 span tag의 style 에서 한다.

App()

case 'mark-student':
	return{
      count: state.count,
      student: state.students.map((student)=>{
        if(student.id === action.payload.id){
          return {...student, isHere: !student.isHere}
        }
        return student
      })
    }

‏‏‎ ‎

profile
안녕하세요~

0개의 댓글