Front-End(Web)/React - 라이브러리들
-
[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)); }} /..
-
[Redux] 순수 Redux App 만들기(생활코딩)Front-End(Web)/React - 라이브러리들 2021. 2. 15. 23:05
🧐 서론 앞서 Redux는 리액트뿐만 아니라 모든 환경에서 (심지어 vanila JS에서도) 사용가능한 상태관리 툴이라고 했다. 먼저, Redux의 기본개념들과 활용법을 HTML scriipt 환경에 적용하면서 공부해보고, 추후 react-redux 를 활용해 리액트에서의 활용법을 공부하려고 한다. 💜 Without Redux 💀 이처럼, 버튼을 누르면 박스들의 색깔이 바뀌는 앱을 만든다고 가정하자. 이처럼, 색깔(박스)들이 추가될 때 마다 색깔함수와, 모든 함수의 onclick 인자로 각각 추가를 해줘야한다. 지금은 HTML 안에 모두 들어있지만, 박스 하나하나가 컴포넌트라면 그만큼 수정소요와 props Drilling 추가가 필요할 것이다. 💜 With Redux 😍 - 설치 우선, Redux 라이브..
-
[Redux] Redux 기본개념Front-End(Web)/React - 라이브러리들 2021. 2. 15. 17:36
🧐 서론 드디어, React 세계에서 한 걸음(어떻게 보면 큰 보폭)을 내딛는 리덕스를 공부하기 시작했다! 중앙 상태관리를 통해 props Drilling의 복잡성을 줄이기 위한 라이브러리 라는 정도로만 알고 있었다. 물론 현재는, Context API 나 함수형의 useContext, useReducer Hooks 들로 일부 대체가 가능하고, graphQL, Apollo 와 같은 차선책들이 등장하고 있다고 알고 있다. 하지만, 상태관리의 '근본'이자 그만큼 아직까지도 많은 기업에서 사용중인 Redux를 공부해보고 다음 프로젝트에 적용시키면서, 상태관리 학습을 위한 기반을 다지고자 한다!! 💜 Redux(리덕스) 란? Redux is a predictable state container for JavaS..