현재 reducers/user.js에서
case LOAD_FOLLOWERS_REQUEST: {
return {
...state,
hasMoreFollower: action.offset ? state.hasMoreFollower : true, // 처음화면 일때는, offset은 0 이므로, false취급을 받아서 true로 넘어간다.(=더보기 버튼을 보여준다.)
// (처음화면일때 offset이 0인것은, router.get('/:id/followers'... 에서 확인가능)
};
}
위와같이
hasMoreFollower: action.offset ? state.hasMoreFollower : true
부분을 적어주셨는데, 이 부분이 잘 이해가 가질 않아서 질문드립니다.
코드 뜻이 이해가 안가는게 아니라, 이 부분이 존재해야하는 이유를 잘 모르겠어서 질문드려요.ㅠ
제 생각에는
case LOAD_FOLLOWERS_SUCCESS: {
return {
...state,
followerList: state.followerList.concat(action.data), // 기존것을 덮어쓰지 말고, 기존것에 추가
hasMoreFollower: action.data.length === 3, // 방금 로드된 팔로워가 1명 또는 2명이라면, 더보기 버튼을 보여줄 필요가 없다.
// 방금 로드된 팔로워가 3명일때만, 더보기 버튼을 보여줄 필요가 있다.
};
}
위 처럼 LOAD_FOLLOWERS_SUCCESS부분에
hasMoreFollower: action.data.length === 3,
이 부분만 있어도 된다고 생각을 하는데,,
그 이유는..
■첫번째이유
의미상으로도 팔로워가 로드됐을때, 3명이 로드되면(=limit을 3으로 설정했었음), LOAD REQUEST후에, LOAD SUCCESS 부분으로 가서...
hasMoreFollower: action.data.length === 3,
이 부분이 true가 될거고, 더보기 버튼이 생길것입니다.
(1명이나 2명이 action.data에 담겨오면, 더보기 버튼이 생기지 않을것입니다.)
따라서 저는 이부분만 있어도 충분하다고 생각을 했습니다..
.
■두번째 이유
처음 프로필 화면에 들어갔을때, redux DevTools를 보면,
LOAD_FOLLOWINGS_REQUEST,
LOAD_FOLLOWERS_REQUEST,
LOAD_FOLLOWINGS_SUCCESS,
LOAD_FOLLOWERS_SUCCESS,
이렇게 4개의 액션이 일어나는것을 확인할 수 있는데요.
이처럼, 처음화면역시 request->success로 바로 이동을 하는데, 그렇다면, 굳이 왜 LOAD_FOLLOWERS_REQUEST쪽에
hasMoreFollower: action.offset ? state.hasMoreFollower : true,
를 넣어줘야 하는지 잘 이해가 안갑니다.
.
그래서 LOAD_FOLLOWERS_REQUEST쪽에 해당 구문을 주석을 처리한 후, 실행시켜봤습니다.
case LOAD_FOLLOWERS_REQUEST: {
return {
...state,
//hasMoreFollower: action.offset ? state.hasMoreFollower : true, // 처음화면 일때는, offset은 0 이므로, false취급을 받아서 true로 넘어간다.(=더보기 버튼을 보여준다.)
// (처음화면일때 offset이 0인것은, router.get('/:id/followers'... 에서 확인가능)
};
}
이처럼 주석을 처리하고 프로필 화면을 들어가도 주석을 하지않았을때와 같은 결과가 나왔습니다.
제가 아직 리액트를 배운지 얼마 안되서 잘 몰라서 이런생각을 하는것일 수도 있을것 같습니다.
.
요약하자면, 굳이 LOAD_FOLLOWER_REQUEST부분에 저 부분을 넣어주신 이유가 궁금합니다!