리액트, 상수데이터 Array.map() 사용하기

위코드 파운데이션 과정을 들으며 정리한 내용입니다.

리액트는 데이터로 이루어진 UI 를 그리는 라이브러리입니다. 이 데이터 시간이 지나도 변하지 않는 값(백엔드 API 로 가져올 필요 없는 값)을 상수 데이터 정적인 데이터 라고 합니다.

반복되는 UI 구조는 상수 데이터와 map 메소드를 활용하면 코드를 비교적 간결하게 작성할 수 있고, 이후 유지보수에도 편리합니다. 아래와 같이 변하지 않는 메뉴 리스트를 만든다고 할 때,

import React from "react";

const App = () => {
	return (
		<div>
			<ul>
				<li>home</li>
				<li>search</li>
				<li>option</li>
				<li>guide</li>
				<li>youtube</li>
			</ul>
		</div>
	);
};

export default App;

상수데이터를 선언하고 map 메소드를 사용하면 아래와 같습니다. 상수 데이터 선언은 컴포넌트 밖에서 합니다. 컴포넌트 내부에서는 state props 혹은 다시 렌더 될 때 재선언, 재할당되는 변수 처럼 변하는 데이터를 선언합니다.

import React from "react";

const App = () => {
	return (
		<div>
			<ul>
				{MENU_LIST.map((menu)=>{
					return <li key={menu.id}>{menu.name}</li>
				})}
			</ul>
		</div>
	);
};

export default App;

const MENU_LIST = [
	{ id: 1, name: "home" },
	{ id: 2, name: "search" },
	{ id: 3, name: "option" },
	{ id: 4, name: "guide" },
	{ id: 5, name: "youtube" },
];

이렇게 하면 UI 에서 수정되는 정보를 상수데이터에서만 바꾸면 되어서 유지 보수에 편리합니다. 상수데이터가 너무 길어서 가독성을 해치거나 다른 파일에서도 사용해야 한다면 별도 파일을 만들어서 관리할 수 있습니다. 별도 js 파일을 만들고 선언 앞에 export 를 붙이면 됩니다.

export const MENU_LIST = [
	{ id: 1, name: "home" },
	{ id: 2, name: "search" },
	{ id: 3, name: "option" },
	{ id: 4, name: "guide" },
	{ id: 5, name: "youtube" },
];

// 기존 파일에서 해당 파일 임포트 할 때는 아래처럼

import React from 'react';
import { MENU_LIST } from './MENU_LIST';
..