React - useReducer

서동찬·2020년 7월 3일
3

React

목록 보기
1/10
post-thumbnail

useReduce

0. useReduce 개념

1) useReduce 상태관리

  • 상태를 업데이트를 하는 방법중 하나
  • usestate와 다른 방법

2) useReduce 특징

  • 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리할 수 있다.
  • 업데이트 로직을 컴포넌트 바깥에 작성 할 수 있다.
  • 다른 파일에 작성한 후 불러와서 사용할 수 있다.

예)

  • useState [ state 업데이트 로직 : 파란색 / 컴포넌트 : 빨간색]

  • useReducer [ state 업데이트 로직 : 파란색 / 컴포넌트 : 빨간색]

3) useReduce 사용 이유

  • React는 state를 변경하면 바뀐 부분을 새로 그리기 위해 모든 컴포넌트를 다시 실행한다. 스케일이 커지는 프로젝트 일수록 최적화를 신경써야한다.(코드를 체계적으로 관리 필요...)
  • useReducer를 사용하면 코드량이 늘어나지만 더 체계적이다.

4) useReduce & useState 언제 사용하는가

  • 정답은 없다.
  • 컴포넌트에서 관리하는 값이 딱 하나고, 그 값이 단순한 숫자, 문자열 또는 boolean 값이라면 확실히 useState 로 관리하는게 편하다.
  • 만약에 컴포넌트에서 관리하는 값이 여러개가 되어서 상태의 구조가 복잡해진다면 useReducer로 관리하는 것이 편해질 수도 있다.
  • setter 함수가 많을 때... 고민할 필요가 있음./...

1. useReducer 작성법

0) useReducer의 필요한 4가지

  • useReducer 함수
  • 상태 stae
  • 해당 이벤트에 맞는 dispatch 설정 / 이벤트와 dispatch 연결
  • 컴포넌트 외부에서 state 업데이트할 reducer 로직 작성

1) useReducer()

  • 형태 : const [ 상태 , 액션을 발생시킬 함수 ] = useReducer( reducer 함수 , 초기 상태 )
  • dispatch / reducer / 초기상태 모두 마음대로 정해도 된다.

2) 상태

  • state랑 같음

3-1) 이벤트에 적용 되는 distpatch 설정

  • 형태 : dispatch ( { type : '구분되는 값' } );
  • 'dispatch'는 useReducer에서 선언 할 때의 '액션을 발생시킬 함수'와 같아야한다.
  • dispatch 함수 내부의 값은 객체 형태이다.
  • 객체 내부에서는 상태 업데이트를 구분하는 type을사용해야한다.

3-2) 이벤트 함수와 dispatch 연결

  • 형태 : 함수 = () => { dispatch( {type : '구분 내용' );

4) state 업데이트할 reducer 로직 작성

  • 형태 : function reducer( state, action ){
    swich(action.type){
    case '구분값'
    return state 변경
    }
    }
  • reducer라는 함수 이름은 useReducer선언할 때 reducer 함수와 같아야한다./
  • state는 useReduer에서 선언 했던 상태를 의미한다. 즉, 선언한 상태 값을 가지고 업데이트가 이루어진다.
  • action은 dispatcher에서 type의 값을 의미한다.

5) 정리

profile
개발자 매뉴얼

0개의 댓글