react에서 redux 시작하기(1)

seunghw·2021년 8월 2일

React redux

Redux

목록 보기

1/2

이 글은 공식문서와 강의 등을 참고해서 작성하였으며
본인이 이해하고 나중에 봤을 때 복기가 빠를 수 있게 작성자 입맛대로 작성하였습니다.

Redux란?

리덕스(Redux)는 오픈 소스 자바스크립트 라이브러리의 일종으로, state를 이용해 웹 사이트 혹은 애플리케이션의 상태 관리를 해줄 목적으로 사용합니다.

왜쓰나?

페이지를 작성하다보면 컴포넌트들을 작성하게 되는데 컴포넌트 안에 컴포넌트 안에 컴포넌트 구석 안쪽까지 props를 전달하려면 무진장 하드하고 귀찮기 때문에 이를 해결하기 위해 쓰인다고 합니다. Context 같은! ~~(물론 이 방법도 세팅하기가 이후에 나온 것들보단 복잡하지만..)~~

또한 reducer,dispatch를 활용하여 상태관리가 용이합니다. 그 부분만 잘 체크하면 됩니다. 엄청 큰 대규모 사이트의 데이터를 한 곳에서 체크하고 관리할 수 있기 때문에 사용합니다.

세팅이 조금 더럽긴 하지만 해놓으면 redux에 있는 state들을 자유롭게 사용할 수 있습니다.

자 그럼 바로 시작해보겠습니다.

0. 프로젝트 생성

기본 프로젝트 생성해주세요. 크게 바꿔서 진행하진 않을 예정입니다.

npx install create-react app.

사실 이렇게 작은 페이지에서는 redux를 쓰면 바람직하진 않습니다. (오히려 코드가 길어짐)

1. Redux 설치하기

npm install redux react-redux

위처럼 두 개의 라이브러리를 받아주세요
(이후에 dispatch로 값도 수정해보겠습니다.)

가볍게 이 기본 프로젝트에 아래 글들만 지우고 숫자를 띄워보겠습니다.

2. Redux Store 생성하기

Redux createStore를 import 해온 뒤에 콜백함수를 사용하여 store를 생성하면 됩니다. 안에는 원하는 데이터의 초기값들을 작성하셔야 합니다. ex) {day: 31, name : kim} 등등

저는 우선 좋아하는 숫자 7을 띄울 수 있게 7을 넣겠습니다.

(index.js)

import ~~~
import {createStore} from 'redux';

let store = createStore(()=> { return 7 })

ReactDOM.render(
~~
~~

3. React에 Redux 스토어 제공하기

React Redux Provider 를 Import 해온 뒤에 에 감싸주고 store를 전송해주면 됩니다.

이렇게 되면 하위 컴포넌트들이 props전송할 필요 없이 state를 사용할 수 있습니다.

(index.js)

import {createStore} from 'redux';
import {Provider} from 'react-redux';
// 이렇게 import 해오기

let store = createStore(()=> { return 7 })

ReactDOM.render(
  <React.StrictMode> 
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

4. 직접 적용하기

이제 직접 store를 사용할 페이지에서 react-redux connect를 import 해오기
- connect함수를 사용해야하기 때문에 가져와야합니다.
store의 state를 props로 만들기 위한 function 생성하기
- 안에 있는 state의 이름은 자유롭게 작성이 가능합니다 그래서 저는
  숫자니까 count로 하겠습니다.
connect함수 export하기
- connect 함수에 직전에 작성한 함수를 넣어줍니다.
props.작성한이름
- 태그에 값을 넣어서 확인을 해봅니다.

저는 바로 보여주기 위해 App.js에서 작성하겠습니다.

(App.js)

import {connect} from 'react-redux';
// 1번

function App(props) {

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>{props.count}</p>
      </header>
    </div>
  );
}
// 2번
function props만들기(state) {
  return {
    count : state
  }
}
// 3번
export default connect(props만들기)(App);