태그값 변동 없게 하기 (단독으로 분리해서 사용하는 법)

리덕스에서 기본값으로 tags도 넣어줌

const initialState = {
  data: [],
  tags: [],
  isLoading: false,
  error: null,
};

getpost 액션에서 tags에 데이터 넣어주기

[__getMyPage.fulfilled]: (state, action) => {
      const myInfo = action.payload;
      const myInfoTag = myInfo.map((row) => row.tags).flat();
      const set = new Set(myInfoTag);
      const uniqueArr = [...set];
      let tagArr = [];
      uniqueArr.map((row, index) => {
        const object = { id: index, tags: row };
        tagArr.push(object);
      });
      //console.log("tagArr", tagArr);
      state.isLoading = false;
      state.tags = tagArr;
      state.data = action.payload;
    },

useSelector로 데이터 가져온 후 tags와 data 나누기

const myPageInfo = useSelector((state) => state.myPage);
  const { data: myInfo, tags: myTags } = myPageInfo;

tags만 map으로 돌리기

{myTags.map((tag) => (
          <Button
            key={tag.id}
            fontSize="12px"
            margin="0 20px 0 0"
            onClick={() => onClickTagHandler(param.nickname, tag.tags)}
          >
            {tag.tags}
          </Button>
        ))}

이렇게 진행하면 태그에 맞는 게시물을 불러와도 태그는 바뀌지 않는다. 기본값에서 data만 바뀌기 때문!! tags는 그대로이기 때문이다.