데이터에서 특정 키의 값만 가져오기

이런 데이터가 있을 때

const mokdata = {
  result: "success",
  msg: "유저의 게시물 조회 성공",
  data: [
    {
      profileImage: "http//~~", //유저 프로필 이미지 주소
      description: "유저 한줄 소개",
      postid: "1",
      createAt: "2022-12-16",
      title: "게시글 제목1",
      tags: ["CS", "SpringBoot"],
      contentSummary: "본문 150자 요약",
      nickname: "jaeHyunKing",
      commentCount: "3",
    },
    {
      profileImage: "http//~~", //유저 프로필 이미지 주소
      description: "유저 한줄 소개",
      postid: "2",
      createAt: "2022-12-16",
      title: "게시글 제목2",
      tags: ["react", "html"],
      contentSummary: "본문 150자 요약",
      nickname: "jaeHyunKing",
      commentCount: "2",
    },
  ],
};

tags 라는 키의 값만 아래와 같은식으로 추출

let bbb = mokdata.data;
let ccc = bbb.map((row) => row.tags); //tag의 키 값만 가져오기

추출하면 [[],[]] 이런식으로 2차원 배열로 나옴

flat 사용해서 배열 하나로 합치기

let ddd = ccc.flat(); //배열 하나로 합치기

위 부분 데이터 가져와서 하나로 합치기

  const myInfo = useSelector((state) => state.myPage.data);

  const myInfoTag = myInfo.map((row) => row.tags).flat();

배열 중복값 제거

const set = new Set(myInfoTag);
  const uniqueArr = [...set];

map함수 돌리기 위해 Key값 있는 함수 만들기

let tagArr = [];
  uniqueArr.map((row, index) => {
    const object = { id: index, tags: row };
    tagArr.push(object);
  });

map함수 돌리기

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

이렇게 나옴.

빈값일 때도 잘 나옴

참고자료

[자바스크립트] flat() 함수-중첩된 배열 구조 하나로 합치기
[JavaScript] Object로 구성된 Array 특정 Key의 Value값 추출 - Array.prototype.map()