[REDUX] - 기초셋팅하기

김찬영·2020년 12월 27일
1

Redux

목록 보기
1/1

리덕스를 사용하는 이유

1. 리액트의 올바른 형식은 최상위 컴포넌트에서 state를 관리하며 props로 하위컴포넌트로 전달하는 방식이다. 하지만, 하위컴포넌트가 수십개 이상이 된다면 props로 전달하는데에만 힘을 다 쓸것이다. 이런 관점에서 리덕스는 해답을 준다. redux를 셋팅만 해주면 내가원하는 컴포넌트에서도 언제든지 state를 바로 사용할 수있다.

2. 추후에 작성하겠지만 state관리가 용이하다. 이것은 reducer 개념을 알아야하므로 차후에 작성하겠다.

리덕스 셋팅하기


yarn add redux react-redux
  • redux , react-redux 라이브러리 2개를 설치해야한다
  • redux는 데이터를 엄격하게 관리하는 기능, react-redux는 리덕스를 리액트에서 쓸 수 있게 도와주는 기능을 제공한다.

1. <Provider> 적용

index.js
import {Provider} from 'react-redux';

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Provider>
        <App />
      </Provider>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

<Provider>를 import하고, state값의 공유를 원하는 컴포넌트를 다 감싼다.

위에서보면, App 컴포넌트와 그 안에 있는 모든 HTML, 컴포넌트들은 전부 state를 직접 props 전송없이 사용할 수 있게된다.

2. createStore() 적용

import {Provider} from 'react-redux';
import {createStore} from 'redux';

let store = createStore(() => {
  return [
    {
      id: 0,
      name: '나이키',
      quan: 2,
    },
  ];
});

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Provider>
        <App/>
      </Provider>
    </BrowserRouter>
  </React.StrictMode>

);

(1) createStore 함수를 사용하기위해서는 import해야한다

(2) 콜백함수에는 내가 원하는 state초기값을 설정한다 => state만들기 끝

3. <Provider>에 state등록


 <Provider store={store}>

(1) store의 데이터를 redux store안에 생성

(2) redux에서는 state들을 store라는 명칭으로 부른다.

4. store에 있는 state 데이터 사용법

(cart.js)
import {connect} from 'react-redux';

function storeProps(state) {
  return {
    state: state,
  };
}

export default connect(storeProps)(Cart);

(1) store의 데이터사용을 원하는 컴포넌트밑에 함수를 하나 생성한다

(2) 화면과같이 connect()를 생성

(3) storeProps 함수는 store 안에 있던 state를 props로 만들어주는 역할을 한다.

(4) return 안에서는{ 적고싶은 작명 : state} 로 작성한다.

(5) store안에 있던 모든 state데이터가 props로 등록된다

(6) {stateName : state.name} 이런식으로 원하는 state만 사용할 수 있다.

(7) connect 함수에 아까 만든 함수를 작성한다. 이건 react-redux 라이브러리 사용법이다. 그리고 Cart 컴포넌트도 소괄호 안에 넣으면 된다. 그럼 redux store에 있던 데이터들이 props로 엮인 채로 컴포넌트가 export 된다.

5. 데이터 바인딩하기

function Cart(props) {
  return (
    <div>
      <Table striped bordered hover size="sm">
        <tr>
          <th>#</th>
          <th>{props.state[0].name}</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </Table>
    </div>
  );
}

profile
Front-end Developer

2개의 댓글

comment-user-thumbnail
2021년 1월 1일

벌써 리덕스까지 마스터 하려는 그는.. 도덕책.

답글 달기
comment-user-thumbnail
2021년 1월 3일

정리 잘 하셨네요 ! 감사합니다 !!

답글 달기