상태가 변하지 않았을 때 페이지 리로딩

-----------------------작성내용 다 -틀림 -----------------------------------------------

문제상황1

• 검색창에 사과 검색 후 -> 사과 검색 : 페이지 주소가 같아서 (/사과 -> /사과)로 이동하는 것이기 때문에 리로딩이 일어나지 않는다(searchWord, pageNumber이 바뀔때만 리로딩 되도록 해놓았기 때문). 그런데 검색모달창에 검색어 클릭시 모든 데이터를 리셋하고 이동하도록 해놓았기 때문에 내용을 사라지고 페이지만 남게 된다.
• 해결방법: 현재와 같은 검색어를 눌렀을때 모든데이터를 리셋하고 다시 검색어를 넣어주는 코드를 넣었더니 데이터가 변경되었다고 생각하고 리로딩이 되었다.

// 검색어 클릭 시 검색 실행되는 함수
  const handleClickSearchWord = (e) => {
    //axios 로 word 전송
    let word = e.target.innerText;
    setSearchBox(false);
    if (e.target.innerText === setSearchInfo.searchWord) {
      dispatch({
        type: 'SET_WORD_FOR_SEARCH',
        payload: '',
      });
    }
    dispatch(postListReset());
    dispatch({
      type: 'SET_WORD_FOR_SEARCH',
      payload: word,
    });
    toTheTop();
    history.push(`/searchlist/${e.target.innerText}`);
  }

문제상황2

• 검색된 페이지에서 새로고침하면 페이지 정보가 모두 날아간다.
• 해결방법 : 파람스로 받은 데이터를 다시 저장해준다.

// useEffect :: < 처음 로딩 될때 || 검색단어 바뀔때 || 페이지 숫자 바뀔때 > 만 실행되는 리스트 요청 함수 ------ 1
  useEffect(() => {
    dispatch({
      type: 'SET_WORD_FOR_SEARCH',
      payload: searchWord,
    });
    postList(searchWord, pageNumber);
  }, [searchWord, pageNumber]);

---------------------------------------------------------_

최종 코드 :

// ------------서치모달

// 검색어 클릭 시 검색 실행되는 함수
  const handleClickSearchWord = (e) => {
    //axios 로 word 전송
    let word = e.target.innerText;
    setSearchBox(false);
    if (e.target.innerText !== setSearchInfo.searchWord) {
      dispatch(postListReset());
    }
    dispatch({
      type: 'SET_WORD_FOR_SEARCH',
      payload: word,
    });
    toTheTop();
    history.push(`/searchlist/${e.target.innerText}`);
  }

// --------------리듀서
import { initialStateSearch } from './initialState';
import {
  SET_WORD_FOR_SEARCH,
  SET_RESULT_COUNT_NUM
} from '../actions/actions';

const setSearchListReducer = (state = initialStateSearch, action) => {
  switch (action.type) {
    case SET_WORD_FOR_SEARCH:
      let data = action.payload;
      return Object.assign({}, state, {
        searchWord: data,
      });
    case SET_RESULT_COUNT_NUM:
      let result = action.payload;
      return Object.assign({}, state, {
        searchCount: result,
      });
    default:
      return state;
  }
};

export default setSearchListReducer;

// ------------------- 서치포스트리스트

// 페이지 별 리스트 요청 함수  ------ 3
  const postList = async (searchWord, pageNumber) => {
    await axios
      .get(`${process.env.REACT_APP_API_URL}/articles/lists`, {
        params: {
          page: pageNumber,
          search: searchWord,
        },
      })
      .then((listData) => {
        console.log(listData)
        let result = String(listData.data.message);
        if (result === 'No results found!'){
          dispatch({
            type: 'SET_RESULT_COUNT_NUM',
            payload: 0,
          });
          setIsLoding(false);
        } else if (result === 'No more articles') {
          setIsLoding(false);
        } else {
          dispatch({
            type: 'SET_RESULT_COUNT_NUM',
            payload: result.split(' ')[1],
          });
          setIsLoding(true);
        }
        dispatch({
          type: 'SHOW_MORE_POSTLIST',
          payload: listData.data.data.articleList,
        });
      })
      .catch((err) => {
        console.log(err);
      });
  };