Closed Februaar closed 11 months ago
네비게이션 바 아이콘 클릭시 상태만 변경하고, UI 전환이 안되는 오류
기존 코드 => useEffect를 사용해서 상태에 따라 비동기적으로 데이터를 불러오고, 그에 따라 UI가 변경되도록 코드 작성
{loading ? ( <SC.Loading> <FontAwesomeIcon icon={faSpinner} fontSize={"25px"} /> </SC.Loading> ) : isShowBookmarked ? ( bookmarkedPost.length === 0 ? ( <SC.Text>저장된 게시물이 없습니다</SC.Text> ) : ( bookmarkedPost.map((post) => ( <Link key={post.postId} href={/post/${post.postId}} passHref> <Image src={post.image?.[0] || "/images/noImage.jpg"} alt="이미지" width={135} height={135} /> </Link> )) ) ) : null}
{loading ? ( <SC.Loading> <FontAwesomeIcon icon={faSpinner} fontSize={"25px"} /> </SC.Loading> ) : isShowBookmarked ? ( bookmarkedPost.length === 0 ? ( <SC.Text>저장된 게시물이 없습니다</SC.Text> ) : ( bookmarkedPost.map((post) => ( <Link key={post.postId} href={
} passHref> <Image src={post.image?.[0] || "/images/noImage.jpg"} alt="이미지" width={135} height={135} /> </Link> )) ) ) : null}
해결 코드 => 상태와 UI를 분리해야 해결 될 문제가 아니었다ㅎㅎㅎ 문제는 북마크 아이콘을 눌렀다가 태그 아이콘을 눌렀을 때 UI가 전환되지 않는 것이었는데, 이를 해결하기 위해서 클릭 이벤트 핸들러에 각 아이콘의 상태를 false로 설정하는 코드를 추가하였고, 이로써 각 아이콘을 클릭할 때 해당 아이콘의 상태가 토글되며, 다른 아이콘들은 모두 초기 상태로 돌아가도록 코드 수정
const handleBookmarkIconClick = () => { if (!isShowBookmarked) { fetchBookmarkPostAllData(); } setIsShowBookmarked(!isShowBookmarked); setIsShowPosts(false); setIsShowTagged(false); };
Description
네비게이션 바 아이콘 클릭시 상태만 변경하고, UI 전환이 안되는 오류
기존 코드 => useEffect를 사용해서 상태에 따라 비동기적으로 데이터를 불러오고, 그에 따라 UI가 변경되도록 코드 작성
{loading ? ( <SC.Loading> <FontAwesomeIcon icon={faSpinner} fontSize={"25px"} /> </SC.Loading> ) : isShowBookmarked ? ( bookmarkedPost.length === 0 ? ( <SC.Text>저장된 게시물이 없습니다</SC.Text> ) : ( bookmarkedPost.map((post) => ( <Link key={post.postId} href={/post/${post.postId}} passHref> <Image src={post.image?.[0] || "/images/noImage.jpg"} alt="이미지" width={135} height={135} /> </Link> )) ) ) : null}해결 코드 => 상태와 UI를 분리해야 해결 될 문제가 아니었다ㅎㅎㅎ 문제는 북마크 아이콘을 눌렀다가 태그 아이콘을 눌렀을 때 UI가 전환되지 않는 것이었는데, 이를 해결하기 위해서 클릭 이벤트 핸들러에 각 아이콘의 상태를 false로 설정하는 코드를 추가하였고, 이로써 각 아이콘을 클릭할 때 해당 아이콘의 상태가 토글되며, 다른 아이콘들은 모두 초기 상태로 돌아가도록 코드 수정
const handleBookmarkIconClick = () => { if (!isShowBookmarked) { fetchBookmarkPostAllData(); } setIsShowBookmarked(!isShowBookmarked); setIsShowPosts(false); setIsShowTagged(false); };To-Do
ETC