実施[Mission 5]コーヒー詳細ページコメント

inputウィンドウでコメントを作成し、enterをクリックしてコメント(コメント)を追加してください.(「企業」ボタンではなく「コメントの追加」ボタンを実装できます)

⭐️ My Thoughts

従来のClone Coding Projectと同様に、Reactを用いて実現されるプロセスである.違いは、JavaScriptによって機能が実現されるのではなく、React Libraryによってコメントが実現されることである.素子の単一属性を用いて実現すれば,JavaScript万を用いた場合よりも容易に実現できると考えられるが,これは非常に不思議な段階である.

📲 インプリメンテーションコード

-既存のコメントと追加するコメント

=> commentdata.json

[
    {
        "id": "Kanye West",
        "ment": "안녕하세요"
    },
    {
        "id": "Jay-Z",
        "ment": "커피 맛좋네요"
    },
    {
        "id": "BTS RM",
        "ment": "군만두 먹고싶다"
    }
]

=>Detail.jsコメントデータ返却プロセス

function Detail() {
    const [normalComment, normalCommentSet] = useState();
    useEffect(() => {
        fetch('http://localhost:3000/data/commentdata.json')
            .then(res => res.json())
            .then(res =>
                normalCommentSet(res));
    }, []) // 기존 댓글 fetch /  public/data 내에 있는 json 데이터를 통해 fetch


    const [commentData, commentAdder] = useState([]);
    const enter = (e) => {
        if (e.key === 'Enter') {
            let newArr = [...commentData];
            newArr.push(e.target.value);
            commentAdder(newArr);
            e.target.value = '';
        }
    } // 새로운 댓글 추가 기능 / 이벤트 키가 'Enter'일 경우 deep copy 후 새로운 댓글 push

これは、既存のコメントのデータ(ユーザID、コメント内容)をjsonファイルに保存してfetch操作を行い、リターンフェーズで使用するコードである.
=>SingleComment.js(追加するコメントコンポーネント)

import React from "react"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faHeart as regularHeart } from "@fortawesome/free-regular-svg-icons";
import { faHeart as solidHeart } from "@fortawesome/free-solid-svg-icons";
import { useState } from "react";

function SingleComment(props) {
    const [heartshape, heartshapeChange] = useState(regularHeart);
    function click() {
        if (heartshape === regularHeart) {
            heartshapeChange(solidHeart);
        }
        else {
            heartshapeChange(regularHeart);
        }
    } // 댓글마다의 하트 기능을 위한 function (하트를 누를 때마다 모양이 변함)

    return (
        <div className="comment">
            <div class="longment">
                <span className="id">{props.id}</span> // 댓글 작성자의 id
                <span className="ment">{props.e} // 댓글 내용
                </span>
            </div>
            <div class="longment-button">
                <button className="deletebutton" onClick={(e) => { e.target.parentElement.parentElement.remove(); }}>삭제</button> 
              // 후반부 단계에 구현할 댓글 삭제 내용 (후반 포스팅에서 다룰 내용)
                <a href="#" className="commentheart" id={props.index}>
                    <FontAwesomeIcon
                        icon={heartshape}
                        onClick={click}
                    /> // 댓글 내의 하트버튼
                </a>
            </div>
        </div >
    )
}

重複したコメントをComponentの形で別々に作成することで、React Libraryの利点を発揮することができ、複数のコメントをComponentに印刷することもでき、JavaScriptよりもプロジェクトを容易に行うことができる.(コメントのHeartも削除ボタンも1つの素子で実行できるので本当に便利です.)
=>Detail.js(追加するコメントコンポーネント)

			<div className="Allcomment">
                            {
                                normalComment && normalComment.map((e, i) => {
                                    return (
                                        <SingleComment
                                            id={e.id}
                                            e={e.ment}
                                            index={i}
                                        />
                                    )
                                })
                            }
                        </div> 
// <Single /> 컴포넌트를 불러와 props.properties를 적용해주고, map을 이용해 댓글을 연새적으로 찍어내줌 (기존 댓글 공간)

                        <div className="Allcomment">
                            {
                                commentData.map((e, i) => {
                                    return (
                                        <SingleComment
                                            id={"G-Dragon"}
                                            e={e}
                                            index={i}
                                        />
                                    )
                                })
                            }
                        </div> 
// <Single /> 컴포넌트를 불러와 props.properties를 적용해주고, map을 이용해 댓글을 연새적으로 찍어내줌 (새로운 댓글 추가될 공간)

書かれたコメントのComponentおよびmap関数を用いてコメント機能を実現するプロセス.確かにJavaScriptを使うよりも実現しやすい.

▼▼実施画面

🐳 に感銘を与える

ReactのComponentの良さは口頭では味わえない段階で、今回のプロジェクトを通してComponentの良さを感じました.また,Map関数と定数データ,Componentを用いてコメントを実現するとともに,単一化操作を簡略化した点が興味深い.ハードコーディングから抜け出すために、これらのComponentの様々な機能を身につけるためには、より努力して勉強しなければなりません.