리액트 리덕스 사용법 정리

리액트 리덕스

리덕스는 모든 컴포넌트에 같은 데이터를 쉽게 전달해주기 위해 전역변수처럼 사용합니다.

리덕스 사용 프로세스

액션을 발생시키면 미들웨어 처리 이후 액션에 맞는 리듀서가 호출되어 스토어의 상태를 바꿀 수 있습니다.

리액트 컴포넌트에 리덕스 connect 방법

import actions from "../../../redux/액션함수.js";

// 리액트 컴포넌트 작성 위치

export default connect(
    (state) => ({
        받을props명: state.스토어state명,
    }),
    {
        ...actions,
    },
)(컴포넌트명);

리액트 컴포넌트 하단에서 리덕스를 connect 해줄 때 넘겨준 파라미터들은 this.props로 꺼내 쓸 수 있습니다.

리덕스 새로고침 시 스토어에 저장된 state 유지 방법

리액트 화면 새로고침 시에는 화면을 닫으면서 componentWillUnmount 함수가 호출되고, 다시 화면을 생성하게 됩니다.
새로고침 시에도 유지되어야 하는 리덕스 데이터는 변경될 때마다 백엔드(node.js) 전역변수에 동기화 시켜두고,
App.js의 componentWillUnmount 함수에서 백엔드에 요청하여 전달받고 다시 스토어에 넣어주면 됩니다.
로컬스토리지나 세션스토리지를 이용해도 같은 효과를 낼 수 있습니다.