Home 페이지에서 특정 키워드를 클릭하면 키워드 관련 페이지로 이동한다.
기존에는 Redux로 인기 검색어에 있는 키워드 및 기사 정보들을 관리하고 있었기 때문에 useSelector를 통해
데이터를 가져왔었다.
그러나, 키워드 관련 페이지에서 새로고침하면 Redux로 관리하고 있는 데이터가 불러오지 못했다.
기존에 Home 컴포넌트에서는 UseEffect를 통해 새로고침 마다 뉴스 기사 정보들을 데이터에 담아와서
문제가 없었다.
키워드 관련 페이지에서 새로고침하면 Home 컴포넌트에서
리렌더링이 일어나지 않기 때문에 데이터를 받아올 수 없는 것이였다.
해결방안)
우리가 키워드를 클릭하면 useNavigate를 통해 키워드 관련 페이지로 이동했다.
이동 시, state 속성을 통해 관련 데이터를 보내주었더니
새로고침해도 데이터를 유지해서 가져올 수 있었다.
export default function KeywordNews() {
const location = useLocation();
console.log(location);
//전달받은 키워드
const keyword = location.state.item;
console.log(keyword);
//const keywordData = useSelector((state) => state.keywordData.value);
const keywordList = location.state.keywordList.value;
//새로고침하면 키워드 데이터 값을 제대로 못받음.
//=> 홈에서는 첫 렌더링이 일어날 때마다 값을 가져오지만, 키워드 뉴스에서 새로고침하면 값을 가져오지 못함.
console.log(keywordList);
//필터 뉴스 새로고침하면 구조분해 오류 생김.
const filterNews = keywordList.filter((data) => data.keyword === keyword);이제 마이페이지에서 유저가 작성한 댓글을 보여줘야한다. 처음에는 댓글이 잘 보였으나, 새로고침하니 홈으로 이동하고 다시 들어가니 redux를 통해 comment 데이터를 받아올 때 제대로 받아오지 못했다.
<문제가 생긴 코드>
export default function UserCommentList() {
const userData = useSelector((state) => state.userData);
const comments = useSelector((state) => state.comments);
//리렌더링 시 유저 데이터는 잘 받아와지는데 댓글들 리스트가 제대로 안가져와짐.
//댓글을 추가할 때 또 리스트에 잘 나옴.. 뭐가 문제냐,, 추가할 때 마다 값을 리턴하잖슴..
//근데 새로고침하면 따로 리턴을 안해서 그런것 같슴.
const filterComments = comments.filter(comment => comment.userId === userData.uid);
console.log(userData, comments);
return (
<>
{
filterComments.map(comment => {
const { keyword, text, date } = comment;
return (<StLi>
<StSpan>{keyword}</StSpan>
<StP>{text}</StP>
<StTime>{date}</StTime>
</StLi>
);
})
}
</>
);
}- 그러나 댓글을 다시 추가하거나 수정을 하면 댓글 리스트가 잘 나타난다.
내 생각엔 댓글이 업데이트되면 comment 리듀서에 의해 바로 데이터가 업데이트 되지만 새로고침하면 초기값으로
반환해서 발생하는 문제인것 같음. - 또한 마이페이지에서 새로고침하면 홈으로 이동했다가 다시 들어가는거라 댓글 상태를 기본값으로 반환해주는듯.
👉 홈으로 다시 이동하지 못하게 설정해야할것 같.. - 마이 페이지 내에서 댓글을 따로 추가하거나 삭제하는게 아니여서 바로바로 업데이트 되는게 아닌거 같다.
export default function ProtectedRoute({ children, requireUser }) {
const userData = useSelector((state) => state.userData);
//유저가 필수인 상태 + 유저 id 존재하면 마이페이지 보여줌.
//유저가 필수 상태가 아님 + 유저 id 존재 안하면 회원가입 안보여줌.
//마이페이지에서 새로고침하면 protectedRoute측에서 유저 데이터를 제대로 못받아오는 문제가 발생해서 홈으로 이동함.
//마이페이지에서는 유저 데이터 잘 받아오는데,,
if ((requireUser && userData.uid) || (!requireUser && !userData.uid)) return children;
return ;
}
우선 마이페이지 새로고침 후, 홈으로 이동하지 못하게 설정하자. 새로고침하면 리덕스에 있는 userData 상태값이 기본값으로 초기화 되기 때문에 발생한 문제이다.
따라서 로컬스토리지에 저장한 뒤 값이 있으면 가져오고
그렇지 않으면 초기값을 가져오도록 설정한다.
userData.js
//로컬스토리지에 유저 데이터가 있는지 확인
let userData = getUserData();
const loginData = (state = userData, action) => {
switch (action.type) {
case LOGIN_USER:
let { uid, photoURL, displayName } = action.payload;
if (!photoURL) photoURL = 'https://www.lab2050.org/common/img/default_profile.png';
userData = { uid, photoURL, displayName };
//if (!photoURL) return { uid, photoURL: 'https://www.lab2050.org/common/img/default_profile.png', displayName };
saveUserData();
return action.payload;
case LOGOUT_USER:
console.log('action ====> ', action.payload)
//로그아웃하면 로컬스토리지에서 제거
localStorage.removeItem('userData');
userData = { uid: '', displayName: '', photoURL: '', };
return userData;
//return { ...userData };
default:
return state;
}
};
function getUserData() {
//유저데이터가 없으면 기본값, 있으면 기존에 있는 유저 데이터 값
const user = localStorage.getItem('userData');
return user ? JSON.parse(user) : { uid: '', displayName: '', photoURL: '', };
}
function saveUserData() {
localStorage.setItem('userData', JSON.stringify(userData));
}- 새로고침을 해도 사용자의 정보가 사라지지 않기 위해
로컬 스토리지를 이용한다. - 사용자의 정보가 있으면 기존의 사용자 정보를 가져오고 로그아웃을 하면 로컬스토리지에서 삭제한다.
➡️ 마이페이지에서 새로고침을 해도 사용자의 정보를
제대로 받아와서 홈으로 리다이렉트 되는 문제를 해결했다.
