TIL. map과 forEach를 사용해보자 - 8/1

instagram 클론중 반복되는 프로필들을 틀을 하나 만들어 찍어내도록 구현해 봤습니다.

1. 프로필 틀 만드는 함수 구현

//프로필 틀 만드는 함수 구현
const createProfileDOM = (profileImageSrc, iD, description) => {
  const profileDOM = document.createElement("div");
  profileDOM.className = "wrapProfile";
  profileDOM.innerHTML = `<img src="${profileImageSrc}" alt="profileImg" /><div><a>${iD}</a><p>${description}</p></div>`;
  return profileDOM;
};

먼저 함수를 선언하고 그 안에는 프로필의 틀을 만들어내는 코드를 짜서 변수에 할당 후 return 했습니다.

2. 리스트 생성

//스토리 프로필 리스트 생성
const storyProfileList = [
  {profileImageSrc: "", iD: "", lastLoginTime: "1분전",},
  {profileImageSrc: "", iD: "", lastLoginTime: "28분전",},
  {profileImageSrc: "", iD: "", lastLoginTime: "6시간전",},
  {profileImageSrc: "", iD: "", lastLoginTime: "7시간전",},
];
// 추천프로필 리스트 생성
const recommendProfileList = [
  { profileImageSrc: "", iD: "", name: "" },
  { profileImageSrc: "", iD: "", name: "" },
  { profileImageSrc: "", iD: "", name: "" },
  { profileImageSrc: "", iD: "", name: "" },
];

이렇게 필요한 정보들을 객체안의 리스트들로 만들어서 배열안에 넣었습니다.

3. map, forEach사용하기

const storyRecomProfileDOMList = document.getElementsByClassName(
  "storyRecomWrap"
); //넣을 곳을 변수에 저장
storyProfileList
  .map((profileInform) =>
    createProfileDOM(
      profileInform["profileImageSrc"],
      profileInform["iD"],
      profileInform["lastLoginTime"]
    )
  )
  .forEach((dom) => {
    storyRecomProfileDOMList[0].append(dom);
  });
recommendProfileList
  .map((profileInform) =>
    createProfileDOM(
      profileInform["profileImageSrc"],
      profileInform["iD"],
      profileInform["name"]
    )
  )
  .forEach((dom) => {
    storyRecomProfileDOMList[1].append(dom);
  });

이렇게 map메서드를 사용해서 배열에 함수를 각각 넣어 재구성 한 후에
forEach메서드를 통해서 넣고자 하는 곳에 추가하여 넣었습니다.