[TIL] 데이터 Redux로 관리

데이터 Redux로 관리

Redux를 활용해 App.js에서 Footer의 활성화 상태를 임의로 관리해보자!

 

[modules/footer.js]

const initialState = {
  active: true,
};
 
function footer(state = initialState, action) {
  switch (action.type) {
      case 'ACTIVE':
        return {
          ...state,
          active: action.active,
        };
    default:
      return state;
  }
}
 
export default footer;

Footer 관련 reducer를 관리하는 파일이다

초기 state를 정의해주고 action에 맞는 payload를 받아와 반환하는 함수를 짜준다

 

[modules/index.js]

import { combineReducers } from 'redux';
import footer from './footer';
 
const rootReducer = combineReducers({
  footer,
});
 
export default rootReducer;

reducer 파일들을 combineReducers로 묶어주는 파일이다

 

[index.js]

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

index.js에서 해당 파일이 store로 들어간다

 

[App.js]

import { useSelector, useDispatch } from 'react-redux';
 
export default function App() {
  let state = useSelector((state) => state.footer );
  let dispatch = useDispatch()
 
  return (
          <button onClick={()=> {dispatch({ type : 'ACTIVE', active : true })} }>Footer 활성화</button>
          <button onClick={()=> {dispatch({ type : 'ACTIVE', active : false })} }>Footer 비활성화</button>
          {state.active === true ? <Footer/> : null}

이렇게 active 값을 payload로 보내 Redux로 Footer 활성화 상태를 임의로 관리해 보았다

 

+++

useEffect에 dispatch를 넣을 때 주의점

  useEffect(() => {
    dispatch({ type : 'ACTIVE', active : false });
  },[]);

의존성 배열을 빈 값으로 넣어두면 무한 랜더링을 방지할 수 있다!

* 의존성 배열은 배열 안에 담긴 값들을 추적하고 변화가 생길 때마다 콜백함수를 업데이트 할 수 있게 해준다

---

+++

Slide 활성화

컴포넌트를 mount/unmount 시키지 않고 화면 외부에 존재하다가 나타나도록 해보자

      <div
        className="footer_container"
        style={{ bottom: !reduxValue.active && '-105px' }}>

Redux의 active 상태에 따라 위치값을 조절해 화면 밖에서 올려준다

.footer_container {
  position: fixed;
  bottom: 0;
  width: 100%;
  transition: all 0.5s;
}

bottom 값이 조절되며 Footer가 slide up/down으로 이동하고 transition: all로 애니메이션도 구현된다!