redux? 이게뭐야!

오늘 필자는 야근을 하고 왔다

 

시험 공부도 하고 ... 그러다보니 react를 공부할 시간이 줄어들었다는 사실 ㅠㅠ

 

하여간 오늘은 좀 중요한 개념에 대해 공부를 하려고 한다.

 

react를 공부하다보면 필연적으로 보는 것이 redux이다. 

 

이 redux란 우선 무엇인가?

 

react redux라고 구글에 검색해보면 이녀석의 실체를 알려줄 공식 사이트가 나타난다 짜잔~

 

https://react-redux.js.org/

React Redux | React 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

 

읽기싫은 사악한(?) 분들을 위해 정리하자면 

 

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

 

결국 첫 페이지에 설명된 것들을 위해서 React Redux를 사용하는 것이다. 

 

그러면 그래!

 

React Redux를 왜 사용하는지 이제 좀 알거같아! 음음...

 

근러면 redux thunk 랑 redux saga는 도대체 뭐지...?

 

https://velog.io/@dongwon2/Redux-Thunk-vs-Redux-Saga%EB%A5%BC-%EB%B9%84%EA%B5%90%ED%95%B4-%EB%B4%85%EC%8B%9C%EB%8B%A4-

Redux-Thunk vs Redux-Saga를 비교해 봅시다!

 

여기 잘 정리된 블로그를 참조하길 바란다. 

 

정말 배울게 너무 많네!

 

다음에는 thunk 랑 saga를 이용해서 연습을 한번 해볼까 한다.