sdc337dc.log
로그인
sdc337dc.log
로그인
React - useReducer
서동찬
·
2020년 7월 3일
팔로우
3
3
React
목록 보기
1/10
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) 정리
서동찬
개발자 매뉴얼
팔로우
다음 포스트
React 설치
0개의 댓글
댓글 작성