오늘 필자는 야근을 하고 왔다
시험 공부도 하고 ... 그러다보니 react를 공부할 시간이 줄어들었다는 사실 ㅠㅠ
하여간 오늘은 좀 중요한 개념에 대해 공부를 하려고 한다.
react를 공부하다보면 필연적으로 보는 것이 redux이다.
이 redux란 우선 무엇인가?
react redux라고 구글에 검색해보면 이녀석의 실체를 알려줄 공식 사이트가 나타난다 짜잔~
React Redux | React Redux
Official React bindings for Redux
react-redux.js.org
그래! 그래서 뭔데?
한번 읽어보자
1. Official! => React Redux는 리덕스와 리액트로부터 가장 최근의 API들을 유지해주는 팀이 있다!
=> 늘상 지원이 빠른 도구네~
2. Predictable! => 예측이 가능하다!
리액트의 컴포넌트 모델과 작동하려고 디자인 됏다!
리덕스로부터 당신의 컴포넌트가 필요로 하는 정보를 뽑아낼 수 있고 필요할 때 컴포넌트가 자동으로 업데이트 될겁니다!
=> 무언가 엄청난 것이 나왔다.
기존에 데이터를 넘겨주려면 react에서는 redux를 사용하지 않는다면 contextAPI 같은 것으로 직접 하나 하나 전달해줘야 한다. 이러한 것을 처리하지 않고 자동으로 간편하게 데이터를 전송하고 뽑아낼 수 있다는 것 같다.
3. encapsulated! => 캡슐화됌!
그대의 컴포넌드들이 리덕스 스토어와 상호작용이 가능한 API를 제공합니다!
그래서, 너는 로직을 혼자 짤 필요가 없다!
=> 두번째에서 말한것 처럼 데이터를 하나하나 직접 넘겨주는 로직을 짤 필요가 없다는 것이다
(안쓰면 얼마나 지옥일지... 흐흠...)
4. Optimized => 성능 최적화 됌!
자동적으로 복잡한 기능 최적화를 수행합니다.(ㄹㅇ?)
그래서 당신의 컴포넌트는 오직 실제 데이터가 변경됏을 때 만 리렌더링 됩니다.
기본적으로 react가 rerendering될때가 props가 변경될 때이다.
이러한 props들을 잘 관리하고 최적화해주는 것이 바로 redux이다!
그러면 안쓸 이유가 없는 아주 좋은 친구이다.
사용법은 이 사이트에서 확인해보자
https://react-redux.js.org/introduction/getting-started
Getting Started with React Redux | React Redux
Introduction > Getting Started: First steps with React Redux
react-redux.js.org
읽기싫은 사악한(?) 분들을 위해 정리하자면
Provider를 이용하면 Redux store에서 어디서든지 접근할 수 있도록 해준다.
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import store from './store'
import App from './App'
const rootElement = document.getElementById('root')
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
rootElement
)
hooks를 위한 redux기법도 있는데
import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import {
decrement,
increment,
incrementByAmount,
incrementAsync,
selectCount,
} from './counterSlice'
import styles from './Counter.module.css'
export function Counter() {
const count = useSelector(selectCount)
const dispatch = useDispatch()
return (
<div>
<div className={styles.row}>
<button
className={styles.button}
aria-label="Increment value"
onClick={() => dispatch(increment())}
>
+
</button>
<span className={styles.value}>{count}</span>
<button
className={styles.button}
aria-label="Decrement value"
onClick={() => dispatch(decrement())}
>
-
</button>
</div>
{/* omit additional rendering output here */}
</div>
)
}
이렇다고 한다.
위 코드들은 전부 공식문서에서 긁어온 것이다.
한번 읽어보면 된다.
그리고 Introduction에서 한번 더 왜 React Redux를 사용하는지 상세하게 설명한다.
https://react-redux.js.org/introduction/why-use-react-redux
Why Use React Redux? | React Redux
Introduction > Why Use React Redux: benefits of using React Redux in a React app
react-redux.js.org
결국 첫 페이지에 설명된 것들을 위해서 React Redux를 사용하는 것이다.
그러면 그래!
React Redux를 왜 사용하는지 이제 좀 알거같아! 음음...
근러면 redux thunk 랑 redux saga는 도대체 뭐지...?
Redux-Thunk vs Redux-Saga를 비교해 봅시다!
Redux-Thunk vs Redux-Saga thunk saga 이글은 Decembersoft 페이지글은 번역한 글입니다. 당신은 Redux tutorials를 이미 끝냄으로써, 당신만의 Redux code를 테스트할 준비가 되었다고 느낄 것입니다. 피와 땀, 눈물
velog.io
여기 잘 정리된 블로그를 참조하길 바란다.
정말 배울게 너무 많네!
다음에는 thunk 랑 saga를 이용해서 연습을 한번 해볼까 한다.