🚀 useReducer와 useContext 복습 useReducer는 state를 업데이트 하는 로직을 분리해서 dispatch를 통해서만 state를 업데이트했었습니다. 이때 dispatch에는 action 객체를 보내게 되는데요. 이 객체에는 원하는 로직과 필요한 데이터를 담아서 보냈었습니다. useContext는 전역 상태 관리를 할 수 있는 hook 함수였습니다. 빈 저장소를 만들고 이 저장소를 useContext에 넘겨주게 됩니다. 최상위 컴포넌트로 방금 만든 저장소.Provider 하고 value로 전역에서 사용하고 싶은 데이터를 넘겨주면 props로 데이터를 넘겨주지 않아도 어떤 자식 컴포넌트에서 전역으로 관리되고 있는 데이터를 사용할 수 있었습니다. → 이 두 hook 함수를 함께 사용한..
🔎 useContext 리액트로 만들어진 웹은 여러 개의 컴포넌트들로 이루어져 있습니다. 리액트에서의 일반적인 데이터 흐름은 부모 컴포넌트에서 자식 컴포넌트로 prop로 데이터를 전달합니다. 하지만 이렇게 부모에서 자식으로 또 다시 자식으로 props를 전달하다가 보면 depth는 굉장히 깊어지고 이에 따라 그 데이터를 추적하기 매우 어려워진다는 치명적인 단점이 생기게 됩니다. 또 그리고 전역적으로 사용하는 정보(ex. 사용자 정보, 테마, 언어 등)를 props로 단계별로 일일이 전달해야 한다면 깊이가 깊어지는 것는 물론이고 코드의 복잡도, 변경 시에 데이터를 추적하는 것이 매우 힘들 것입니다. 그래서 리액트에서는 이러한 문제를 해결하기 위해 Context API를 제공하고 있습니다. ❓ Context..
- Total
- Today
- Yesterday
- 프론트엔드 기초
- HTML
- frontend
- rtl
- 자바
- 자바스크립트
- JSP
- 자바스크립트 기초
- 스타일 컴포넌트 styled-components
- 인프런
- 데이터분석
- react-query
- 타입스크립트
- 프론트엔드 공부
- 디프만
- styled-components
- TypeScript
- 딥러닝
- react
- 파이썬
- Python
- 리액트
- 머신러닝
- testing
- 리액트 훅
- next.js
- 프론트엔드
- CSS
- 프로젝트 회고
- jest
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |