🎱 상수 데이터

- 상수 데이터란?

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

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

• 반복되는 UI를 하드코딩으로 작성하면, 코드가 길어져서 가독성에 좋지 않고, 수정이 필요할 시 해당하는 부분을 찾기 힘들어 추후 유지보수가 힘들어짐.
  => 이런 반복되는 UI를 상수 데이터 + Array.map() 함수의 조합을 이용해서 간결하게 표현할 수 있다.
• 추후, 수정할 필요가 생겼을 경우에는 상수 데이터에서 해당하는 부분의 내용만 변경해주면 되기 때문에 유지보수가 용이해진다.

🎱 상수 데이터 활용 예제

🐳 댓글 예제

상수 데이터를 사용하기 전

• CommentList.js

    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
  

    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;

⭐️ 파일 내부에서 상수 데이터 활용 예시

• 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;