[실전프로젝트] 계층화 중복태그 기능구현
⚙️ 바뀐 API
기능 | METHOD | URL | request | response |
---|---|---|---|---|
태그목록 정보 조회 | GET | /api/tags?type=COUNTRY | ?type=COUNTRY | [{'tagId': 3, 'name': '한식'}] |
태그 관련 음식 목록 호출 | POST | /api/foods/tags | tag_ids: [6,7,8] | [{'name': '짜장면', 'imgUrl': 'www.image.png', 'tags': [{'tagId': 1, 'name': '매운 맛'}] |
검색 페이지를 구현하기 위해 두 개의 모듈과 두 개의 컴포넌트를 생성했다.
→ 생성한 모듈
// tag.js (태그목록 불러오기)
export const getTagThunk = createAsyncThunk("tag/getTag", async (type) => {
const response = await instance.get(`/api/tags?type=${type}`);
return response.data;
});
// tagresult.js (태그음식 결과 나오게 하기)
export const getTagResultThunk = createAsyncThunk(
"tag/getTagResult",
async (tag_ids) => {
const param = {
tag_ids
}
const response = await instance.post(`/api/foods/tags`,param);
console.log(response.data);
return response.data;
}
);
여기서 꿀팁
- axios 인스턴스를 생성해 따로 import 해서 사용하면 매우 편하다
✔︎ 이제 컴포넌트에서 작업하기 전에 고려할 점은?
그림으로 보면 편할 것 같아 와이어 프레임을 가져왔다
- 카테고리 하나에 태그는 하나만 선택되게 구현해야하고
- 태그가 중복 선택되지 않도록 예외 처리를 해야 한다.
- 중복 선택을 막기 위해 findIndex를 사용해야겠다.
중복 태그를 제거하고 카테고리 하나에 태그 하나만 선택 가능하게 할 이벤트 핸들러 handleClickCategory
를 만들어준다. 그 다음 두 개의 변수를 선언한다. 구현하기위해서 아래 코드처럼 쓸 수 있다.
// TagSlide.js
const handleClickCategory = (id, name) => {
let hasThisCate = selectedTag2.findIndex((tag) => tag.id === id);
let hasNowCate = selectedTag2.findIndex((tag) => tag.nowCate === nowCate);
if (hasThisCate === -1 && hasNowCate === -1) {
setSelectedTag2([...selectedTag2, { id, name, nowCate }]);
} else if (hasThisCate !== -1) {
alert("이미 선택된 태그에요");
} else {
alert("하나만 선택 가능해요");
}
};
확인 버튼을 누를때 태그 조건에 맞는 데이터도 보여줘야한다. 두개의 변수를 선언하고 push
로 배열을 추가해준다. 그리고 나서 이벤트를 호출해주면 끝!
// TagSlide.js
const handleSubmitTags = () => {
console.log("submit");
let tagIdArray = [];
let tagNameArray = [];
setTagOpen(false);
for (let i in selectedTag2) {
tagIdArray.push(selectedTag2[i]["id"]);
tagNameArray.push(selectedTag2[i]["name"]);
}
dispatch(getTagResultThunk(tagIdArray));
setSelectedTag(tagNameArray);
};
이 코드를 보니 생각나는 일화가 있는데 처음에 목록을 불러올 수 없다는 에러 메세지가 떴다
백엔드에서도 서버 쪽 오류는 없다고 해서 내 코드를 보던 중 엄청난 실수를 발견 🤭
dispatch
로 Id를 호출해야 하는데 Name을 할당하고 있었다.
다시 tagIdArray
로 수정했더니 음식 목록이 아주 잘 나왔다.
음식 목록은 map
으로 반복문을 돌며 새로운 배열을 생성했다.
Author And Source
이 문제에 관하여([실전프로젝트] 계층화 중복태그 기능구현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hyunjung/실전프로젝트-계층화-중복태그-기능구현저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)