[실전프로젝트] 계층화 중복태그 기능구현

⚙️ 바뀐 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 으로 반복문을 돌며 새로운 배열을 생성했다.