フィードバック機能の実装

自己記憶に記録を残す.

inputラベルにコメントを入力し、その入力値をstateに保存します.

{/* <input> 태그의 value 속성은 <input> 요소의 초깃값(value)을 명시합니다. */}
{/* value로 input 태그의 초기값으로 commentValue를 준다. 그리고 input에 담긴 값을 처리한 후에, 
다시 value에 commentValue에 ''을 줌으로서 input 태그를 초기화 한다.(uploadComment) */}


<input
 onChange={handleCommentInput}
 className="input_comment"
 type="text"
 value={commentValue}
  placeholder="댓글 달기..."
/>

//input에서 값의 변화가 일어나면 아래의 함수를 실행한다. event 값을 감지하고 그것을 updateComment에 보낸다.
  
 function handleCommentInput(event) {
    updateComment(event.target.value);
  }

次にupdateComment関数eventを使用します.target.valueはcommentValueというstateに含まれています.
ここで、inputタグの値に{commentValue}を入れたのは、inputにコメント内容を入力し、コメント後にinputタグに値を残さずに「コメント...」残された初期化装置のために.

 <input> 태그의 value 속성은 <input> 요소의 초깃값(value)을 명시합니다.
 -TCP School
 출처: http://tcpschool.com/html-tag-attrs/input-value

ボタンを押すと、入力した値がコメントに表示されます.
ボタンにonclick関数を作成します.次にuploadComment関数を実行します.

<button className="comment_btn" onClick={uploadComment}>
   게시
</button>


* Comment component를 댓글에 달릴 곳에 넣어준다.
  // Comment (name, commentValue) 형태로 한다. 
  	왜냐하면 아이디가 있고 댓글이 달리기 때문이다.
  // {name: '값', commentValue: '값' }
  //props.name이 아이디가 되고, commentValue가 댓글 내용이 된다.
  
  const Comment = props => {
    return (
      <div className="comment">
        <span>{props.name}</span>
        <span> {props.comment}</span>
      </div>
    );
  };


{/* 변경된 값이 담긴 listComments에 map을 해준다.(배열 내의 모든 요소 가각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열로 반환) */}
{/* listComment는 내가 지정한 인자이다. 이 인자는 배열 내의 { name: '', comment: '' }이다. */}
{/* Comment component를 써서 부른다. 단, name key의 값은 listComment.name이고 comment의 key값은 listComment.comment이다. */}
                
                
                
//listComment는  {name: '값', commentValue: '값' }가 전달 되는 것이다.             
  <div>
   {listComments.map(listComment => (
    <Comment
      name={listComment.name}
      comment={listComment.comment}
	 />
    ))}
  </div>



 //uploadComment함수는 실행되면
  //listComments를 spread 전개구문 복사해서 newlistComments에 담는다. 
	왜냐하면 state를 직접적으로 수정해서는 안되기 떄문이다.
  //newlistComments에 { name: 'testID', comment: commentValue(input에 담긴 값) } push 해준다.
  //값이 최종 변경된 newlistComments를 listComments에 넣어서 state가 간접적으로 변경되게 한다.
 //이벤트처리는 한 태그에 한번만사용 가능 그러므로 이 안에서 다 처리해야 함
 
  function uploadComment() {
    let newlistComments = [...listComments];
    newlistComments.push({ name: 'testID', comment: commentValue });
    setListComments(newlistComments);
    
    updateComment('');
  }

コンポーネントを私が入れる位置に入れます.Commentsコンポーネントのnameはpropsに渡された{name:",comment:"""}のnameの値{listComment.name}を受信して出力し,commentはcommentの値({listComment.comment})を受信して出力する.

修正点:コードは諸説あり、これまでの反応の理解はまだ完全ではない.もっと勉強して、コンポーネントも分けて、単独でファイルを書いて、コードを再整理する必要があります.