🚀 useReducer와 useContext 복습 useReducer는 state를 업데이트 하는 로직을 분리해서 dispatch를 통해서만 state를 업데이트했었습니다. 이때 dispatch에는 action 객체를 보내게 되는데요. 이 객체에는 원하는 로직과 필요한 데이터를 담아서 보냈었습니다. useContext는 전역 상태 관리를 할 수 있는 hook 함수였습니다. 빈 저장소를 만들고 이 저장소를 useContext에 넘겨주게 됩니다. 최상위 컴포넌트로 방금 만든 저장소.Provider 하고 value로 전역에서 사용하고 싶은 데이터를 넘겨주면 props로 데이터를 넘겨주지 않아도 어떤 자식 컴포넌트에서 전역으로 관리되고 있는 데이터를 사용할 수 있었습니다. → 이 두 hook 함수를 함께 사용한..
🔎useReducer 이해하기 상태를 업데이트 할 때에는 useState를 사용해서 새로운 상태를 설정해주었습니다. 상태를 관리하게 될 때 useState를 사용하는 것 말고도 다른 방법이 있습니다. 바로, useReducer를 사용하는 것인데요. 이 Hook 함수를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있습니다. 상태 업데이트 로직을 컴포넌트 바깥에 작성할 수도 있고, 심지어 다른 파일에 작성 후 불러와서 사용도 가능합니다. 정리하자면, useReducer의 역할은 복잡한 상태 업데이트 로직을 컴포넌트 안에서 관리하지 말고 바깥에 따로 빼서 관리할 수 있도록 하는 것! useReducer를 사용해 보기 전에 useState를 사용한 코드를 잠시 먼저 보겠습니다. 다음 코드는..
- Total
- Today
- Yesterday
- 타입스크립트
- testing
- Python
- 자바
- 디프만
- styled-components
- react-query
- HTML
- 리액트 훅
- 머신러닝
- 프로젝트 회고
- 프론트엔드 기초
- TypeScript
- frontend
- 딥러닝
- 자바스크립트
- JSP
- 프론트엔드
- next.js
- 리액트
- 인프런
- 파이썬
- CSS
- 프론트엔드 공부
- react
- jest
- 스타일 컴포넌트 styled-components
- rtl
- 데이터분석
- 자바스크립트 기초
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |