개인 리액트 프로젝트를 진행하는데 게시글을 작성하면 최신게시글이
배열 맨 앞에 오게 unshift를 사용하여 코드 작성을 했다.
export default handleActions(
{
...
[ADD_POST]: (state, action) =>
produce(state, (draft) => {
draft.list.unshift(action.payload.post);
}),
},
initialState
);이때 확인해야할 부분이 아래 콘솔창에서 post: {list: Array()} 값이다.
post list 데이터를 예를들어 2개 가지고 있을경우 Array(2)로 표시가 되있어야하는데 내 프로젝트에서는 계속 0으로 보여서 게시글을 작성하고 나서도 기존에 있던 메인페이지에 목록들이 보이지 않고 아래 이미지처럼 새로작성한 글만 보이고
콘솔 창에서도 Array가 3개로 되있어야하는데 1개로 변경된걸 확인 할 수 있다.
그리고 나서 다시 새로고침을 하고 콘솔창을 확인해보면 Array가 3개로 변경된걸 확인할 수 있다.
무슨 문제인가 싶어서 계속 코드 비교해보고 찾아보는데 action이나 다른부분에서도 아무런 문제가 없어서 당황스러웠다. 그러다 여태 글쓰기 페이지에 들어갈때 주소창에 직접 글쓰기 페이지를 입력해서 들어갔었는데 생각해보니 이번 history는 리덕스와도 관련이 있어서 configureStore에서 생성했었다...
그래서 글쓰기 버튼에 history로 페이지 이동을 해서 혹시나 하고 글쓰기 버튼을 눌러서 작성을 해봤다. 글쓰기 버튼을 눌러서 작성을 하니 바로 잘 실행이 되어서 너무 충격적이었다...
저번주차 기초강의때는 컴포넌트 내에서만 히스토리 사용하는걸 해봐서 주소창에서 직접 이동을 해도 아무런 문제가 되지 않았던 것이었다. 이번에는 리덕스에서 .then 후처리 상황에서도 페이지 이동이 가능하게끔 해야 되기 때문에 모듈 안에 만든 리덕스 관련 js 파일내에서 변경되게끔 해야되서 history를 configureStore에서 생성했다.
이번일을 통해 history를 지정한 곳에서 실행하는게 중요하다는걸 배웠다. 정말 생각하지 못했던 부분이여서 글로 남기게 됐다.
