프로젝트 중 community 페이지를 구현하는데 해당 각 게시물을 클릭하면 상세페이지로 넘어가고 각 게시물의 내용을 props로 넘겨주었다. 그런데 이때 기존에 좋아요 혹은 북마크 했다는 불리언 값들을 useState의 초기값으로 지정하려고 하였으나 잘 되지 않았다.
const DetailCommPost = (props) => {
const dispatch = useDispatch();
const history = useHistory();
const params = useParams().postId;
const isLogin = sessionStorage.getItem('token');
const post = props?.postList;
const postLike = post?.postLike;
const bookmarked = post?.postBookMark;
const [like, setLike] = React.useState(postLike);
const [bookmark, setBookmark] = React.useState(bookmarked);
console.log(like); //false
console.log(postLike); //true
const toggleLike = () => {
if (like === false && isLogin) {
setLike(true);
dispatch(postActions.likeDetailPostDB(post.postId));
} else {
setLike(false);
dispatch(postActions.likeDetailPostDB(post.postId));
}
};
const toggleBookmark = () => {
if (bookmark === false && isLogin) {
setBookmark(true);
dispatch(postActions.bookmarkDetailPostDB(post.postId));
} else {
setBookmark(false);
dispatch(postActions.bookmarkDetailPostDB(post.postId));
}
};
useEffect(() => {
dispatch(postActions.getDetailPostDB(props.postId));
}, [like, bookmark]);
if(!post) {
return (
<div></div>
)
}
return (
<React.Fragment>
<Grid >
<Grid width="100%" >
<Grid><Text>{post?.postType}</Text></Grid>
</Grid>
<Grid
_onClick={()=>{
history.push(`/community/${post.postId}`)}}>
<Grid>
<Text size="large">{post?.postTitle}</Text>
</Grid>
<Grid>
<Image type="circle" size="24px" imgUrl={post?.profileImgUrl}/>
<Text>{post?.nickname}</Text>
<Grid><Text>・ {post?.postRecentTime}</Text></Grid>
</Grid>
<Grid><Text>{post?.postContent}</Text></Grid>
{post?.postImgUrl?
<Grid width="100%" >
<Image type="rectangle" imgUrl={post.postImgUrl}/>
</Grid>: null}
</Grid>
{/* bottom part - 좋아요, 댓글, 북마크 */}
<Grid width="100%" margin="20px 0px" position="relative">
<Grid is_flex >
{like===true?
<FaHeart
onClick={()=> toggleLike()} style={{width:"20px", height:"fit-content", color:"#FA4D56"}}/> :
<FaRegHeart onClick={()=>toggleLike()} style={{width:"20px", height:"fit-content"}}/>
}
<Text margin="0px 8px" size="base" color="#6F6F6F">{post?.postLikeCount}</Text>
<FaRegComment style={{width: "20px", height:"fit-content"}} /><Text margin="0px 8px" size="base" color="#6F6F6F">{post?.commentCount}</Text>
</Grid>
<Grid position="absolute" top="0px" right="0px" >
{bookmark===true?
<FaBookmark onClick={()=>toggleBookmark()} style={{width: "20px", height:"fit-content", color:"#0AAF42"}}/> :
<FaRegBookmark onClick={()=>toggleBookmark()}style={{width: "20px", height:"fit-content"}} />
}
</Grid>
</Grid>
</Grid>
</React.Fragment>
)
}
export default DetailCommPost;
내가 생각하기에는 props에서 딸려온 postLike를 like의 초깃값으로 정해줬으니 둘이 똑같아야 했다. 하지만 계속 값이 달랐다.
해결방안: useEffect 활용
처음 like를 선언할 때 props가 값을 가져오는 순서와 일치하지 않아 발생한 일인 것 같았다. 그래서 useEffect를 활용하여 props의 값이 달라졌을 때, useEffect를 실행시켜 setLike로 like의 값을 props.postLike와 같아지게 하였다.
useEffect(() => {
dispatch(postActions.getDetailPostDB(postId));
setLike(postLike);
setBookmark(bookmarked);
}, [post.postId, like, bookmark]);
상세페이지를 불러올 때에도 props를 통해서 dispatch해서 해당 상세페이지를 불러왔는데, 이 때도 props가 넘어오는 속도와 dispatch하는 순서가 맞지 않아서 전에 봤던 게시글이 불러져오기도 하였다.
이 부분에 대해서는 props에 포함된 postId로 dispatch하여 데이터를 불러오지 않고, useParams훅을 사용하여 즉시 데이터를 불러올 수 있게 하였다.