React Map 함수 사용

Map 함수 사용 전

<ul>
	<li>
		<a href="/">Home</a>
	</li>
	<li>
		<a href="/Filter">Winners</a>
	</li>
	<li>
		<a href="/Filter">Nominess</a>
	</li>
	<li>
		<a href="/Filter">Collections</a>
	</li>
	<li>
		<a href="/Filter">Academy</a>
	</li>
</ul>

Map 함수 사용 후

{SIDE_DATA.map((list, index) => {
              return index === 0 ? (
                !userToken && (
                  <li
                    key={list.id}
                    onClick={() => {
                      toggleModal();
                      handleSideBarOpen();
                    }}
                  >
                    <a href="#!">{list.content}</a>
                  </li>
                )
              ) : (
                <li key={list.id}>
                  <a href={list.address}>{list.content}</a>
                </li>
              );
            })}


const SIDE_DATA = [
  { id: 1, content: 'Register / log in', address: '' },
  { id: 2, content: 'Home', address: '/' },
  { id: 3, content: 'Winners', address: '/winners' },
  { id: 4, content: 'Nominees', address: '/nominees' },
  { id: 5, content: 'Collections', address: '/Filter' },
  { id: 6, content: 'Academy', address: '/Filter' },
];

느낀점

ul과 li 태그를 사용하는 것도 좋지만 바뀌지 않을 데이터들을 Mock 데이터를 만들어 Map으로 활용하면 더 깔끔하고 쉽게 만들 수 있는 것을 알게되었다