[react]定数データ

🚶🏻‍♀️ 定数データ

🚶🏻‍♂️ 定数データの例

::定数データを使用する前に

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;

::定数データ使用後

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;

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;

*定数データをファイルに宣言して使用する例

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;