오류 및 문제점
1. localstorage 값 불러오기
- 문제점: 로그인 사용자 정보를 얻기 위해 localstorage의 값을 불러와야 한다.
- 해결 방안: getItem 메소드를 이용해 값을 불러온다.
const userNo = localStorage.getItem("userNo");2. event.target.value undefined
- 문제점: event.target.value를 출력한 경우 undefined이라고 출력되는 경우가 있다.
- 해결 방안: getAttribute 메소드를 이용해 값을 불러온다.
const replyNo = event.currentTarget.getAttribute("value");3. timestamp 형식 문자열 변환
- 문제점: timestamp 형식의 문자열을 datetime 형식으로 변경해야 한다.
- 해결 방안: new Date, toISOString을 이용해 날짜로 생성한다.
new Date(reply.replyRegdate).toISOString().split("T")[0] +
" " +
new Date(reply.replyRegdate)
.toISOString()
.split("T")[1]
.split(".")[0]4. useState 배열 특정 값 삭제
- 문제점: 댓글 삭제 시 특정 객체가 state에서 삭제되어야 한다.
- 해결 방안: filter 메소드를 이용해 거른다.
setReplyData(replyData.filter((reply) => reply.replyNo != replyNo));5. child 컴포넌트에서 parent state 변경
- 문제점: 게시글 삭제를 하면 게시글 리스트에서 삭제되어야 한다.
- 해결 방안: 콜백 함수를 이용해 부모의 state를 변경한다.
// Search.jsx
const updateSnsList = (newList) => {
setsnsList(newList);
};
// SnsDetail.jsx
const newList = snsList.filter((sns) => sns.snsNo != snsNo);
updateSnsList(newList);진행 상황
1. 인기 카드, 검색 페이지 useState로 변경
2. 해시태그 검색 시 게시글 리스트
- 이미지 슬라이드, 디자인은 다른 팀원이 만든 컴포넌트 참고하여 사용
- 댓글 작성, 게시글 삭제 실시간 반영
- 좋아요
- 사용자 클릭하면 프로필로 이동
// Search.jsx
// 검색 버튼 눌렀을 때
const search = (value) => {
const searchType = value.searchType;
const search = value.searchValue;
if (searchType === "nickname") {
axios
.post("/search/nickname", { search })
.then((res) => {
setuserList(res.data.map((data) => data));
setsnsList([]);
})
.catch((err) => console.log("error", err));
} else {
setsnsList([]);
api
.post("/search/hashtag", { search })
.then((res) => {
setsnsList(res.data.map((data) => data));
setuserList([]);
})
.catch((err) => console.log("error", err));
}
};
// 게시글 컴포넌트가 변경되었을 때 (삭제)
const updateSnsList = (newList) => {
setsnsList(newList);
};
{/* 해시태그 검색 */}
<div>
{snsList.map((sns, i) => {
return (
<SnsDetail
token={token ? token : null}
snsData={sns}
key={i}
snsList={snsList}
updateSnsList={updateSnsList}
/>
);
})}
</div>
// SnsDetail.jsx
const SnsDetail = ({ snsData, snsList, updateSnsList }) => {
// 링크 이동
const navigate = useNavigate();
// 게시글 사진, 댓글, 해시태그 정보 (리스트로 들어오는 정보)
const [photoData, setPhotoData] = useState([]);
const [replyData, setReplyData] = useState([]);
const [hashtagData, setHashtagData] = useState([]);
// 좋아요 관련 정보
const [heart, setHeart] = useState();
const [heartCnt, setHeartCnt] = useState();
// 댓글 작성 내용
const [replyContent, setReplyContent] = useState("");
// 경비, 경비 모달
const [exp, setExp] = useState({ expTitle: "", expPlace: "", expMoney: 0 });
const [isModalOpen, setIsModalOpen] = useState(false);
// 현재 로그인중인 사용자 번호
const userNo = localStorage.getItem("userNo");
// 컴포넌트 로드 시 데이터 설정
useEffect(() => {
setPhotoData(snsData.snsPhoto.map((data) => data));
setReplyData(snsData.reply.map((data) => data));
setHashtagData(snsData.hashtag.map((data) => data));
setHeart(snsData.heart);
setHeartCnt(snsData.heartCnt);
}, [snsData]);
};참고 자료
어쩌다 풀스택 :3