[React] map을 이용한 상수 데이터 관리

1. 상수 데이터란?

상수데이터란 변하지 않는 값, 정적인 데이터를 뜻한다. 조금 더 풀어서 설명하자면 화면 구성에는 필요하지만 변하지 않기 때문에 백엔드 API를 통해서 가져오지 않아도 되는 데이터들은 상수 데이터로 따로 관리하면 보다 더 효율적으로 사용할 수 있다.

2. 상수 데이터를 왜 사용할까? 상수 데이터의 장점

• 반복되는 데이터들을 하드코딩으로 일일이 만들게 되면 코드 가독성이 떨어진다.
• 코드가 길어져 가독성이 떨어지면 그만큼 유지보수가 힘들어진다.
• 반복되는 데이터들을 map함수를 이용하면 코드를 간결하게 정리할 수 있고, 추후 유지보수가 용이해진다.
• 상수 데이터는 JS파일을 따로 만들어 분리하거나 필요한 파일을 만들어 사용할 수 있다.

3. map을 이용하여 상수 데이터 만들어보기

• 프로젝트때 담당하였던 회원가입 페이지로 예시를 들어보겠다.
  
  

(1) 상수 데이터를 사용하기 전 - 회원가입 페이지에는 이름, 이메일, 비밀번호, 연락처, 주소를 입력하는 총 5개의 input이 있다. 아래 코드에서는 보다시피 텍스트만 다를뿐 같은 스타일, 기능, UI를 가지는 input이 반복되고 있는 것을 확인할 수 있다.

<form className="signUpInput">
          <div className="nameInput">
            <div className="inputMessage">Name *</div>
            <input
              className={userNameBorder ? 'clickedInputLine' : 'inputLine'}
              name="userName"
              onChange={handleInput}
              onFocus={() => handleFocusBorder('userNameBorder')}
              onBlur={() => handleBlurBorder('userNameBorder')}
            />
          </div>
 <div className="emailInput">
            <div className="inputMessage">Email(ID) *</div>
            <input
              name="email"
              className={emailBorder ? 'clickedInputLine' : 'inputLine'}
              onChange={handleInput}
              onFocus={() => handleFocusBorder('emailBorder')}
              onBlur={() => handleBlurBorder('emailBorder')}
            />
          </div>
          <div className="passwordInput">
            <div className="inputMessage">Password *</div>
            <input
              type="password"
              name="password"
              className={passwordBorder ? 'clickedInputLine' : 'inputLine'}
              onChange={handleInput}
              onFocus={() => handleFocusBorder('passwordBorder')}
              onBlur={() => handleBlurBorder('passwordBorder')}
            />
          </div>
          <div className="phoneNumberInput">
            <div className="inputMessage">Phone Number *</div>
            <input
              name="phoneNumber"
              className={phoneNumberBorder ? 'clickedInputLine' : 'inputLine'}
              onChange={handleInput}
              onFocus={() => handleFocusBorder('phoneNumberBorder')}
              onBlur={() => handleBlurBorder('phoneNumberBorder')}
            />
          </div>
          <div className="addressInput">
            <div className="inputMessage">Address *</div>
            <input
              name="address"
              className={addressBorder ? 'clickedInputLine' : 'inputLine'}
              onChange={handleInput}
              onFocus={() => handleFocusBorder('addressBorder')}
              onBlur={() => handleBlurBorder('addressBorder')}
            />
          </div>

(2) 상수 데이터 파일 - 상수 데이터를 사용하기 위해 파일을 따로 만들어 값을 관리하였다. SignUpData.js 파일을 만들고 SignUpData라는 상수 데이터를 선언하였다.

export const SignUpData = [
  {
    id: 'name',
    name: 'userName',
    text: 'Name *',
    type: 'text',
  },
  {
    id: 'email',
    name: 'userEmail',
    text: 'Email(ID) *',
    type: 'text',
  },
  {
    id: 'password',
    name: 'userPassword',
    text: 'Password *',
    type: 'password',
  },
  {
    id: 'phoneNumber',
    name: 'userPhoneNumber',
    text: 'PhoneNumber *',
    type: 'text',
  },
  {
    id: 'address',
    name: 'userAddress',
    text: 'Address *',
    type: 'text',
  },
];

(3) input태그를 InputContainer명의 컴포넌트화를 시키고SignUpData를 import시켜 map함수를 이용해 데이터를 렌더링 하고 있다. 코드도 간결해졌을 뿐더러 컴포넌트의 목적이 뚜렷하게 보이고 추후 수정사항이 생길 시 유지보수도 훨씬 쉬워진다. 요소를 삭제하고 싶을 땐 데이터 파일에 들어있는 요소를 삭제하면 되고 추가 할 내용이 생기면 요소를 추가하면 된다.

import { SignUpData } from './SignUpData';

(중략)

<form className="signUpInput">
          {SignUpData.map(list => {
            return (
              <InputContainer
                key={list.id}
                id={list.id}
                name={list.name}
                text={list.text}
                type={list.type}
                onChange={handleInput}
              />
            );
          })}
        </form>