[React] 상수 데이터

상수 데이터?

• 변하지 않는 데이터, 즉 정적인 데이터

• UI 구성에 필요하지만 동적으로 변하지 않아서 백엔드 API 등을 통해서 가져올 필요가 없는 정적인 데이터들을 상수 데이터로 만들어 UI 를 효율적으로 구성할 수 있다.

✔️ 상수 데이터를 사용하는 이유

• 반복되는 UI 를 하드코딩으로 하나하나 만들어두게 되면, 코드가 길어져 가독성이 좋지 않고, 수정이 필요할 때 해당하는 부분을 찾기 힘들어 추후 유지보수가 힘들어질 수 있다

• 이러한 반복되는 UI 를 상속 데이터 + array.map() 함수의 조합을 이용해 간결하게 표현 가능

• 추후에 수정할 필요가 생겼을 경우, 상수 데이터에서 해당하는 부분의 내용만 변경해주면 되기 때문에 유지보수가 용이

상수 데이터를 사용하기 이전 (CommentList 컴포넌트에 Comment 라는 컴포넌트가 반복적으로 사용되고 있음)

• 이 경우, 컴포넌트에 코멘트 말고도 더 많은 내용이 들어가게 된다면 가독성이 좋아지지 않고, 여러 개를 만들어야 한다면 Comment 컴포넌트를 추가하고 name, comment, isLiked 등 props 를 일일이 할당해줘야 한다.

 import React from "react";
import Comment from "./Comment/Comment";
import "./CommentList.scss";

function CommentList() {
  return (
    <div className="commentList">
      <h1>댓글</h1>
      <ul>
        <Comment
          name="wecode"
          comment="Welcome to world best coding bootcamp"
          isLiked={true}
        />
        <Comment 
          name="joonsikyang" 
          comment="Hi therer." 
          isLiked={false}
        />
        <Comment 
          name="jayPark" 
          comment="Hey." 
          isLiked={false} 
        />
      </ul>
    </div>
  );
}

export default CommentList;

상수 데이터를 사용할 때

• commentData.js 라는 별도의 파일을 만든 후, 그 안에 COMMENT_LIST 라는 상수 데이터를 선언
• CommentList.js 에서 COMMENT_LIST 를 import 한 후, Array.map() 메소드를 이용해서 Comment 를 렌더링 하고 있다.

☑️ commentData.js

const COMMENT_LIST = [
  {
    id: 1,
    userName: 'wecode',
    content: 'Welcome to world best coding bootcamp!',
    isLiked: true
  },
  {
    id: 2,
    userName: 'joonsikyang',
    content: 'Hi there.',
    isLiked: false
  },
  {
    id: 3,
    userName: 'jayPark',
    content: 'Hey.',
    isLiked: false
  }
];

export default COMMENT_LIST;

☑️ CommentList.js

import React from 'react';
import Comment from './Comment/Comment';
import COMMENT_LIST from './commentData';
import './CommentList.scss';

function CommentList() {
  return (
    <div className="commentList">
      <h1>댓글</h1>
      <ul>
        {COMMENT_LIST.map(comment => {
          return (
            <Comment
              key={comment.id}
              name={comment.userName}
              comment={comment.content}
            />
          );
        })}
      </ul>
    </div>
  );
}

export default CommentList;

‼️ 이 때, 해당 파일에서만 사용하는 간단한 상수 데이터의 경우 파일 내부에 선언해서 사용하기도 한다.
( 상수 데이터의 길이가 너무 길거나, 여러 개의 파일에서 공통적으로 사용하는 경우에는 위의 경우처럼 별도의 JS파일로 분리해서 사용한다.)

파일 내부에서 상수 데이터를 선언해서 활용

-CommentList.js
✔️ 해당 파일에서 가장 중요한 내용은 컴포넌트 이기 때문에, 중요도의 순서에 따라 컴포넌트 다음에 상수 데이터를 선언해주어야 한다.

import React from 'react';
import Comment from './Comment/Comment';
import './CommentList.scss';
     
function CommentList() {
 return (
   <div className="commentList">
     <h1>댓글</h1>
     <ul>
       {COMMENT_LIST.map(comment => {
         return (
           <Comment
             key={comment.id}
             name={comment.userName}
             comment={comment.content}
           />
         );
      })}
    </ul>
  </div>
 );
}
     
const COMMENT_LIST = [
  {
    id: 1,
    userName: 'wecode',
    content: 'Welcome to world best coding bootcamp!',
    isLiked: true
  },
  {
    id: 2,
    userName: 'joonsikyang',
    content: 'Hi there.',
    isLiked: false
  },
  {
    id: 3,
    userName: 'jayPark',
    content: 'Hey.',
    isLiked: false
  }
];
     
export default CommentList;

이러한 상수 데이터가 활용되는 실제 사례

파란색 박스로 표시되어 있는 Footer 에 들어가는 값처럼 반복된 UI 이면서, 변하지 않는 값들 같은 경우, 상수 데이터로 만들어서 렌더링하면 훨씬 간편하고, 유지보수에 용이