React - 상수 데이터

1. 상수 데이터

• 상수 데이터란? 이름 그대로 변하지 않는 정적인 데이터를 말한다.
  (특히, UI를 구성하다보면, 동적으로 변하지 않아서 백엔드 API로 가져올 필요가 없는 데이터들이 있는데, 상수 데이터는 변하지 않는 정적인 요소에 주로 많이 사용되기에 정적으로 변하지 않는 요소들에겐 상수 데이터로 만들어 UI를 구성할 수 있다.)

(1-1) 상수 데이터를 사용하는 이유

• 반복적으로 만들어지는 UI를 일일히 하드코딩을 하게 되면 코드의 가독성이 떨어지고 유지보수 측면에도 좋지 않는 영향을 끼치게 된다. 여기서 상수 데이터를 활용하게 될시에는 Javascript의 Array.map 메서드를 활용해서 반복되는 UI를 보다 간결하게 만들 수 있다.

• 상수 데이터에서 수정이 필요할경우 레이아웃은 map 메서드의 return 문의 JSX 부분만, 내용은 상수 데이터 부분만 수정하면 되기에 유지보수 및 관리에 용이하다는 장점이 있다.

2. 상수 데이터 활용 전

import React from 'react';

const Signup = () => {
  return (
    <div>
    	<select className="month">
        	<option>1월</option>
            <option>2월</option>
            <option>3월</option>
            <option>4월</option>
            <option>5월</option>
        </select>
        ...
        
        <select className="phoneNumber">
        	<option>010</option>
            <option>011</option>
            <option>016</option>
            <option>017</option>
            <option>018</option>
            <option>019</option>
        </select>
    </div>
  );
};

export default Signup;

• 상수 데이터를 활용하기 전에 예시 코드를 간략하게 작성해봤다. 예시와 같은 코드를 상수 데이터를 활용하지 않고 구성한다고 하면, 동일한 형태의 select 태그를 만들고 개수만큼 붙여넣기 한 다음 내용을 수정하는 방식과 같이 비효율적으로 UI를 구성하게 된다. 또한 처음 구성할 때 뿐만 아니라, 특정 요소의 텍스트 내용이나 링크 주소가 바뀐다거나 태그의 구조가 바뀐다고 하면 일일이 찾아서 수정해야 하는 불편함도 있다.

3. 상수 데이터 활용 후

3-1) 상수 데이터 선언

• 중복되는 코드를 기반으로 상수 데이터를 만들 때는 우선 바뀌어 들어갈 부분을 찾아야 한다. 특히 Array와 map 메서드를 활용해 반복적인 UI를 만들것이기 때문에 상수 데이터의 형태는 배열로 만들어 적용시켜야 한다. 먼저 상수 데이터임을 나타내기 위해서 변수명은 UPPER_SNAKE_CASE naming convention에 따라 명명하는 것이 좋다.

내,외부 컴포넌트 작성)

// 배열로만 이용해서 상수 데이터를 선언할경우
const BIRTHDAY_MONTH_LIST = Array.from({length: 12}, (_, i) => `${i + 1}월`);
const PHONENUMBER_LIST = ['010', '011', '016', '017', '018', '019'];

// 배열과 객체 둘다 이용해서 상수 데이터를 선언할경우
const FOOTER_INFO_LIST = [
	{ id: 1, link: "https://github.com/terms", text: "Terms" },
  	{ id: 2, link: "https://github.com/privacy", text: "Privacy" },
    
    ...
    
    { id: 11, link: "https://github.com/about", text: "About" },
];

• 2가지 예시에서 배열로만 이용해서 상수데이터를 선언할수도 있고 배열안에 객체형식으로 넣어 선언할수도 있다. 요소의 형태는 구조에 따라서 위와 같은 객체 형태 뿐만 아니라 숫자, 문자열, 배열등이 될 수도 있다.

3-2) 상수 데이터 적용

import React from 'react';

const Signup = () => {
  return (
    <div>
    	<select className="birthdayBox month">
           {BIRTHDAY_MONTH_LIST.map((month, index) => (
              <option key={index}>{month}</option>
           ))}
        </select>
        ...
        
        <select className="phoneNumber">
          	{PHONENUMBER_LIST.map((number, index) => (
               <option key={index}>{number}</option>
            ))}
        </select>
    </div>
  );
};

export default Signup;

• 이렇게 선언한 상수 데이터와 map 메서드를 활용해 실제 코드에 적용한 모습인데, 이전 코드와 달리 Signup 컴포넌트의 코드가 훨씬 간결해진것을 볼 수 있다.
• 또한 유지보수도 용이하기에, 예를 들어 특정 항목의 링크 데이터를 수정하고 싶다면, 상수 데이터에서 해당 항목을 쉽게 찾아 수정할 수 있다는 장점이 있다.

Prop을 이용하여 상수 데이터 넘겨주기)

// Footer.js
import React from 'react';

const Footer = () => {
  return (
    <footer>
	  {/* 생략 */}
      <ul>
	    {FOOTER_INFO_LIST.map(info => (
          <FooterInfo key={info.id} link={info.link} text={info.text} />
        ))}
      </ul>
    </footer>
  );
};

export default Footer;

• 이처럼 map 메서드에서 return하는 JSX를 컴포넌트화하고 prop으로 넘겨주는 방식으로도 활용할 수 있다. (해당 코드는, Footer 컴포넌트에 만들어둔 상수 데이터를 FooterInfo 라는 공용 컴포넌트에 prop으로 넘겨줄 수 있음을 알 수 있는것이다.)

3-3) 상수 데이터 선언 위치

• 상수 데이터를 선언할때 내부 컴포넌트에서 선언해서 사용하는 방법과 별도로 JSX 파일로 분리해 import해서 가져오는 방법(prop)이 있는데 2가지 방법에 대해 자세히 알아보면 다음과 같다.

(1) 내부 컴포넌트에서 선언

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import UserInput from '../../Components/UserInput';
import UserButton from '../../Components/UserButton';
import './Signup.scss';

const Signup = () => {
  ... 생략 ...
  return (
    <div className="signup">
      ... 생략 ...
            <div className="numberSelectFrame">
              <select className="numberBox">
                {PHONENUMBER_LIST.map((number, index) => (
                  <option key={index}>{number}</option>
                ))}
              </select>
              ... 생략 ...
            </div>
          </div>
            ... 생략 ...
            <div className="birthdaySelectFrame">
              ... 생략 ...
              <select className="birthdayBox monthBox">
                {BIRTHDAY_MONTH_LIST.map((month, index) => (
                  <option key={index}>{month}</option>
                ))}
              </select>
              ... 생략 ...
            </div>
          </div>
          ... 생략 ...
        </div>
      </div>
    </div>
  );
};

export default Signup;

// 생일 데이터 : 년,월,일
const BIRTHDAY_MONTH_LIST = Array.from({ length: 12 }, (_, i) => `${i + 1}월`);
// 휴대폰 데이터 : (010)
const PHONENUMBER_LIST = ['010', '011', '016', '017', '018', '019'];

• 상수 데이터가 코드의 가독성을 해치지 않는다면? 컴포넌트 파일 내부에서 상수 데이터를 선언해 사용할수 있다. 이때 상수데이터는 구성에 따라 다음과 같이 다른 위치에서 작성해야한다.

  1) 컴포넌트의 state나 prop 등등 컴포넌트 리랜더링시 변하는 값을 포함하는 상수 데이터는 컴포넌트 내부에서 작성
  2) 컴포넌트가 리랜더링 될 때마다 새로 선언되고 할당될 필요가 없는 상수 데이터는 컴포넌트 외부에서 작성

(2) 별도의 JSX 파일로 분리

• 상수 데이터가 해당 컴포넌트 뿐만 아니라 다른 컴포넌트에서도 공통적으로 사용되는 경우, 혹은 상수 데이터의 길이가 너무 길어서 가독성을 해치는 경우에는 다음 예시처럼 별도의 JSX 파일로 분리해서 import로 가져와 사용할 수 있다.

// data.jsx

export const FOOTER_INFO_LIST = [
  { id: 1, link: "https://github.com/terms", text: "Terms" },
  { id: 2, link: "https://github.com/privacy", text: "Privacy" },
	...
  { id: 11, link: "https://github.com/about", text: "About" },
];

• 이 경우 예를들어 data.jsx 라는 파일에서 export한 상수 데이터를 import 해서 사용해야 한다.

// Footer.js

import React from 'react';
import { FOOTER_INFO_LIST } from './data';

const Footer = () => {
  return (
    <footer>
	  {/* 생략 */}
      <ul>
		{FOOTER_INFO_LIST.map(info => (
          <li key=`footerInfo${info.id}`>
            <a href={info.link}>{info.text}</a>
          </li>
        ))}
      </ul>
    </footer>
  );
};

export default Footer;

전체 요약)

• 상수 데이터는 이름 그대로 변하지 않는 정적인 데이터를 말한다.
• 상수 데이터를 사용하는 이유는 반복적으로 만들어지는 UI를 일일히 하드코딩을 하게 되면 코드의 가독성이 떨어지고 유지보수 측면에도 좋지 않는 영향을 끼치게 되기에 상수 데이터를 사용한다.
• 상수 데이터는 Array와 map 메서드를 이용해서 UI를 구성할 수 있고, 확장성 있게 구성할 수 있기 때문에 유지보수가 용이하다.
• 상수 데이터는 컴포넌트 파일 내부에서 선언하거나 별도의 JSX 파일로 분리해서 사용할 수 있다.