React / Redux [2] - React-Redux 기초 개념

해당 게시물은 udemy-React 완벽가이드 강의와 Redux 공식 문서를 바탕으로 작성된 글입니다.

---

 

React / Redux [1] - Redux 기본 개념

---

이전강에 이어서 강의를 보며 배운 내용을 작성!

 

이전강까지는 리덕스 자체를 배웠고 이번에는 리덕스에 대한 내용 조금 + 리액트로 리덕스를 사용하는 법을 공부했음.

 

TMI인데 시험이고 과제고 너무 뭐가 많아가지고 공부가 중간에 끊겼었는데,

다시 원래하던 lms 프로젝트로 돌아왔고, 토익도 원하는 점수가 나와서 계속 이제는 개발에 집중할 수 있을것 같탱!

 

암튼 시작

---

[react-redux]

리액트와 같은 프론트엔드 라이브러리는 상태관리가 필요하다보니 일반적으로 redux 쓸때랑은 조금 달라서,

이를 조금 더 쉽게해주는 react-redux 라이브러리를 동시에 사용해주어야함

 

우선 store를 만들고 action을 등록하는 내용은 동일하니 이전 게시물을 참고하고 공부했음.

(글 써놓으면 좋은게 나중에 다시 읽어보면 잘 기억남)

 

우선 react에서 redux를 사용하기 위해서는 Provider설정을 해줘야함

 

provider는 간단히 말해서 전역에 내가 원하는 변수를 지정해서 전체 상태에서 쓸 수 있도록 하는 기능 이라고 알면 좋은데,

제대로 말하자면 엄청 심오해서 공부하고 담에 말해줌 헣

 

src/index.js

import { Provider } from "react-redux";

...
import store from "./store";
...

root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

이건 react의 최상단 index.js 파일인데 여기에 Provider설정을 해서 전체 앱에서 내가 설정한 store를 읽고 쓸수 있게끔 Provider의 store props에 내가 사용할 store를 전달해줘야함

 

말이 어려운데, 그냥 context 나 recoil, react-query 쓸때처럼 전역 설정을 해준다!

라고 하고 넘어가겠음

 

이제 어디서든 내가 만들어 두었던 store에 접근할수 있음

 

---

Counter.jsx

const Counter = () => {
  const counter = useSelector((state) => state.counter);
  const show = useSelector((state) => state.showCounter);

  const dispatch = useDispatch();
  const toggleCounterHandler = () => {
    dispatch({type:'toggle'})
  };

  const incrementHandler = () => {
    dispatch({type:'increment'});

  };
  const decrementHandler = () => {
    dispatch({type:'decrement'});
  };

  const increaseHandler = () => {
    dispatch({type:'increase', amount: 5})
  }

  return (
    <main className={classes.counter}>
      <h1>Redux Counter</h1>
      {show && <div className={classes.value}>{counter}</div>}
      <div>
        <button onClick={incrementHandler}>Increment</button>
        <button onClick={increaseHandler}>Increment by 5</button>
        <button onClick={decrementHandler}>Decrement</button>
      </div>
      <button onClick={toggleCounterHandler}>Toggle Counter</button>
    </main>
  );
};

export default Counter;

우선 오늘 공부했던 코드 내용인데 처음부터 작성해보겠음

 

1. useSelector ( from react-redux)

내가 store에서 저장해두었던 state를 들고올때 사용하는 react-redux의 hook

사용 방법은 useSelector((state) => state.가져올_스테이트) 형식으로 사용하면 그 스테이스 변수를 반환해줌

 

+ 특징적인걸로는, 별도로 subscribe를 하지 않고 이 훅을 쓰는 것 만으로도, 자동으로 store의 내용을 반영해줌

const counterSubscriber = () => { const latestState = store.getState(); console.log(latestState);};

store.subscribe(counterSubscriber);

이러한 작업이 생략된다고 생각하면 됨

 

2. useDispatch (from react-redux)

이 dispatch를 통해 action을 날려줄 수 있음.

const dispatch = useDispatch() 형태로 함수처럼 불러와서, 이벤트를 발생시키는 식으로 사용해주면 됨

 

dispatch({type="any"}) 이렇게 사용해주면 action을 던져주는거고,

기존 redux 에서 해당 store의 dispatch 매소드를 바로 사용하는거랑 비슷함

 

 

[react-redux with class component]

이 부분은 꼭 볼 필요는 없는 부분인데, react를 클래스 형식으로 사용했을때 redux를 사용하는 방법임

코드만 남기고 슝 떠남

 

class Counter extends Component {
  // constructor(){}

  incrementHandler(){
    this.props.increment();
  }
  decrementHandler(){
    this.props.decrement();
  }
  toggleCounterHandler(){

  }
  render(){
    return     <main className={classes.counter}>
    <h1>Redux Counter</h1>
    <div className={classes.value}>{this.props.counter}</div>
    <div>
      <button onClick={this.incrementHandler.bind(this)}>Increment</button>
      <button onClick={this.decrementHandler.bind(this)}>Decrement</button>
    </div>
    <button onClick={this.toggleCounterHandler}>Toggle Counter</button>
  </main>
  }
}

const mapStateToProps = state => {
  return {
    counter : state.counter
  }
}

const mapDispatchToProps = dispatch => {
  return {
    increment : () => dispatch({type:'increment'}),
    decrement : () => dispatch({type:'decrement'})
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(Counter);

 

특징적인것 하나만 설명하자면, react-redux의 hook인 connect가 바로 구독 역할을 해주는 것인데,

이 connect함수 실행을 반환해서 컴포넌트를 export하는게 인상적임

 

connect의 파라미터로는 상태와 프롭, 디스패치와 프롭을 연결시켜주는 함수가 들어오고,

그렇게 실행된 connect는 새로운 함수를 반환하는데, 거기에 랜더링 될 React Component를 넣어주는 식으로 진행됨

 

 

결론

zustand쓸래

 

 

---

참고강의

https://www.udemy.com/course/react-the-complete-guide-incl-redux/