반응형
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- vuedraggable
- vue composable 함수
- d3 지도 툴팁
- vue draggable 차트 안나옴
- pm2 업데이트 에러
- 함수형 프로그래밍
- git
- vue3 drag and drop
- nuxt universal rendering
- 화살표 함수 중괄호
- 참조형 props의 default
- cloud firestore id auto increment
- ToDo
- vue 컴포저블 함수
- 화살표 함수 {}
- Learning React
- ecmascript modules(esm)
- reflow
- pm2 버전 충돌
- component is already mounted please use $fetch instead.
- 참조형 default
- 인터넷 거버넌스
- d3 지도 타입스크립트
- firebase id 자동
- repaint
- d3 지도
- $fetch
- in-memory pm2 is out-of-date
- commonjs와 ecmascript modules(esm)
- d3 지도 확대/축소
Archives
- Today
- Total
빵 입니다.
useState() vs useReducer() 본문
반응형
📌 useState()
- state 관리 도구
- 단순 상태 업데이트, 복합적이지 않은 상태, 연결되지 않는 상태
- 간단한 컴포넌트나 단일 상태 변수를 다루기에 적합하다.
- 개별적인 상태를 다루기에 적합하고, 각 상태 변수는 독립적으로 동작한다.
- 단순한 상태 업데이트와 컴포넌트 간 연결이 적은 경우에 유용하다.
📌 useReducer()
- state 가공
- 최신 state 스냅샷, 복잡한 로직
- 주로 복잡한 상태 로직이나 여러 상태 간의 관계가 있는 경우에 유용하다.
- 복잡한 상태 업데이트 로직을 포함하거나 여러 상태를 동시에 업데이트할 때 적합하다.
- 연관된 상태 조각들로 구성된 상태 관련 데이터를 다루는 경우 사용한다.
ex) 폼 인풋 state - state 하나를 변경하는 여러 액션이 있는 경우(데이터 상태에 따라 분기 처리 필요) 사용한다.
ex) 유효성 검사 - 기존의 상태를 직접 변경하지 않고 새로운 상태를 반환한다.
- state와 action을 이용하여 새로운 상태를 계산하고 반환한다.
🔥useEffect와 useState를 이용해 useReducer 작업을 대신 할 수 있다. 그러나 useReducer가 더 간단할 것 같다.
반응형
'프론트엔드 > React' 카테고리의 다른 글
리액트의 Context ➡️ Context API (0) | 2023.12.14 |
---|---|
리액트 주요 콘셉트 (0) | 2023.12.13 |
useReducer() (0) | 2023.12.13 |
useEffect() (0) | 2023.12.13 |
useRef() (0) | 2023.12.06 |