Redux

Seokho·2022년 7월 27일

Redux

상태관리 라이브러리

Redux 사용 이유

1. props문법 귀찮을 때 사용(props drilling)

리액트 스타일 웹개발

index.html안에 component를 원하는곳에 복사 붙여넣는 식으로 개발한다.

개발하다 보면 state를 만들게 된다. state = 변수

부모 -> 자식으로 props로 state를 전달해야함.

props drilling

props를 전달하기 위해 props문법을 엄청나게 많이 사용되는 현상임.
혹은 Component를 오직 props를 전달하기 위해 사용되는 현상.

결론적으로 props문법을 개많이 사용되는 상황이라고 생각하면 된다.

이럴때 Redux를 사용하면 됨.

모든 componet가 props없이 state 직접 꺼낼 수 있음!

리덕스를 설치하면 state를 보관할 수 있는 보관함을 만들 수 있음. 예를들면 store.js

여기에 중요하고 반복되는 state를 보관할 수 있음. 그럼 모든 component들이 state를 직접 꺼내 사용할 수 있음.

// index.js
const 체중 = 100;

function reducer(state = 체중, action) {
  return state;
}

let store = createStore(reducer);

<Provider store={store}>
      <App />
  </Provider>

// App.js
export default function App() {
  
  const 꺼내온거 = useSelectore((state) => state); // state 직접 꺼내서 사용 가능

  return (
    <div>
      <p>님의 몸무게 : {꺼내온거} </p>
    </div>
  );
}

2. state 변경 관리할때 사용(상태 관리)

예를들면 state를 많은 component에서 자유롭게 사용함.

componet들이 몸무게 state를 변경하기 시작.

근데 갑자기 버그 생김 비상!

몸무게 state가 number이어야 하는데, 갑자기 string으로 바뀜.

이럴때 component를 전부 뒤져봐서 버그를 추적해야함...

하지만 Redux 스타일 state 관리하면 버그 추적하기가 굉장히 유용함.

state를 수정하고 싶으면 그 밑에 수정 방법들을 미리 작성해놓는다. 예를 들면 이거 누르면 +1 혹은 -1 등등

component들은 저 state를 직접 수정하는 것이 아닌 요청만 하는거임. store.js 혹은 index.js 이름이 뭐든 암튼 문 두드리며 요청만 가능함.

// index.js

//reducer : state 수정 방법 및 state 가져다 사용하는 방법
function reducer(state = 체중, action) {
  if (action.type === '증가') {
    state++;
    return state;
  } else if (action.type === '감소') {
    state--;
    return state;
  } else {
    return state;
  }
}

// App.js

// 컴포넌트에서 state 수정 요청 하려면 -> dispatch 함수 사용
import { useSelectore, useDispatch } from 'react-redux';

export default function App() {
  const 꺼내온거 = useSelectore((state) => state);
  const dispatch = useDispatch();

  return (
    <div>
      <p>님의 몸무게 : {꺼내온거} </p>
      <button
        onClick={() => {
          dispatch({ type: '증가' });
        }}
      >
        더하기
      </button>
    </div>
  );
}