map의 깨달음

저요? 원래 map이랑 안친하고; 거리두고 낯가리는 사람이었는데요..
프로젝트 시작한지 이제 어언 2~3일(휴일 있었으니 2~3일이라 칩시다)

근데 이 li중복된다고 map메서드로 사용하면서 조금 더! 예쁘고 활용적이게 수정해야 한다는 멘토님의 말씀.. 크흡 저 map이랑 안친하단 말예요!!!!ㅠ0ㅠ!!!

하지만 갓00님의 도움으로..
울며 겨자먹기로 보고쓰는 map에 도전..

보면서 쓴 나의 코드

<ul>
	<li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="">Guide</Link>
            </li>
            <li>
              <Link to="">Member</Link>
            </li>
</ul>

이 중복중복 ul+li를 map메서드를 사용한다면 컴포넌트 두개만 만들면 된다 이거예용

첫번째. 이 데이터를 옮길 데이터js

export const GUIDE_LIST = [
  {
    id: 1,
    name: 'Home',
    url: '/',
  },
  {
    id: 2,
    name: 'Guide',
    url: '/',
  },
  {
    id: 3,
    name: 'Member',
    url: '/',
  },
];

그리고 두번째
이 아가덜을 옮겨 담아줄 item.js

import React from 'react';
import { Link } from 'react-router-dom';

function FooterItem({ item }) {
  const { url, name } = item;
  return (
    <li>
      <Link to={url}>{name}</Link>
    </li>
  );
}

export default FooterItem;

그리고 마지막으로 footer.js수정

처음에 나온 중복중복 ul li를 요렇게 수정하면 된다!

<ul>
            {GUIDE_LIST.map(item => (
              <FooterItem key={item.id} item={item} />
            ))}
</ul>

전후 똑같긴 한데.... 어쨋든 이미지는 이러하다

전

후

사실 같은 이미지 복붙입니다 왜냐면 똑같거든요;
일단 주소부분은 아직 정해진게 없어 메인디폴트 '/'로 줌 나중에 수정해라 유키키!

띠용 아니 근데..
이거말고 ul li 또 있었던 것이었습니다..
근데 이건 link아닌 다른 span과 내용...
저 새로운거 낯선거 낯가린단말이에요 8ㅅ8

하지만 할수있는거 못하고 토끼는 그런 제 모습이 더 싫기 때문에 일단
코드 때려박아넣기 헤헤 6v6

원래의 코드

<div className="companyInfo">
          <h3>COMPANY INFO</h3>
          <div>
            <ul>
              <li>
                <span>COMPANY</span>
                '냠냠프룻'
              </li>
              <li>
                <span>MEMBER</span>
                '프론트엔드: 익명보장해드립니다 / 백엔드: 울팀원 사랑합니다'
              </li>
              <li>
                <span>TEL</span>
                '010.7365.4553 (wecode)'
              </li>
              <li>
                <span>ADRESS</span>
                '서울특별시 강남구 테헤란로 427, 위워크타워 (wecode)'
              </li> 
            </ul>
          </div>
        </div>

이 길고 긴 중복중복을

요렇게 간단하게

<ul>
	{INFO_LIST.map(item => (
                <FooterList key={item.id} item={item} />
              ))}
</ul>

만들어 주는데.. 문제가 발생

원래의 item.js를 쓰자니.. 이걸 어케 나눠 써야할지 모르겠고...
일단 시간 없으니 (무서운 기능구현 로그인.........회원가입........ㅠㅠ)
item.js를 새로 만들어주기로!
이름 겹치니.. 이 친구는 footerList.js로 했다.
왜냐면 list가 들어가니까..? 아닌가..? 넘 별론가요? 수정해야겟다

새로만든 list.js친구는 이 코드

import React from 'react';

function FooterList({ item }) {
  const { name, content } = item;
  return (
    <li>
      <span>{name}</span>
      {content}
    </li>
  );
}

export default FooterList;

link는 필요없기때문에 걍 삭제해버림!

비교이미지 나갑니다
전

후

일단 전 마저 footer수정하고 git에 push해야하므로 이만 여기까지 쓰도록 하겠습니다
나중에 수정하러 올게요 "뿅"