react-redux
-
[Redux] Hooks - useSelector, useDispatchFront-End(Web)/React - 라이브러리들 2021. 2. 17. 02:55
😅 서론 react-redux의 connect() 함수와, mapStateToProps, mapDispatchToProps 를 열심히 공부했는데... Dev Ed님 유튜브 영상을 복습하면서, useSelector, useDispatch 라는 간편한 Hooks들을 지원해주는 것을 알았다. (하마터면 connect() 함수로 프로젝트 진행할뻔) 이를 계기로, react-redux에서 지원하는 Hooks 들의 종류와 기능에 대해 한번 공부해보았다. 💜 React-Redux의 Hooks 적용 React-Redux 7버전 이후로, React 에 대한 Redux 관련 Hooks API들을 제공하게 되었다. 이에 따라, 이전의 connect() HOC(Higher-Order Component) 작업이 불필요해진 것이..
-
[Redux] React-ReduxFront-End(Web)/React - 라이브러리들 2021. 2. 16. 18:58
이전 포스팅에서 React+Redux 조합을 했듯이, Container 와 Presentational 기능분리의 번거로움이 있었다. 아마, 이를 Context API의 Provider, Consumer 개념처럼 Global State를 공급하는 역할을 이 react-redux가 해줄 것 같다. 💜 React? Redux? React-Redux? React는 자바스크립트 기반 SPA 라이브러리, Redux는 React 뿐만 아니라 JS환경의 상태관리를 개선하기 위해 등장한 라이브러리다. 그렇다면, React 프로젝트 시 설치하는 Redux 말고, React-Redux 라이브러리의 의의는 무엇일까? - 의의 Redux 자체는 React, Angular, Vue 및 vanila JS 를 포함한 모든 UI 레이..
-
[Redux] React + Redux App 만들기(생활코딩)Front-End(Web)/React - 라이브러리들 2021. 2. 16. 16:16
이번엔, React 컴포넌트와 Redux의 조합을 공부하려고 한다. (생활코딩 react-redux 과제와 함께) Global State를 Redux 문법을 통해서 다루는 것 뿐만 아니라, 디렉토리와 파일구조(store, reducer 등)를 배우는 것에도 중점을 둬야겠다. 💜 React Without Redux 💀 이번엔, 아래와 같이 숫자를 수정하고 표시하는데 있어 각각 두 번의 Depth를 거치는 컴포넌트를 React로 만들었다. // 1. AddNumber.js const AddNumber = ({ plusNum }) => { const [size, setSize] = useState(1); return ( Add Number { setSize(Number(e.target.value)); }} /..