(React)댓글기능 다양하게 구현해보기

댓글 기능을 두가지 방식으로 구현해 보았습니다 .

 

1번째방법 

array 배열을 이용해서 만들어보기

function Tabcontent(props){
    let [입력값,입력값변경]=useState("");
    let [글제목,글제목변경]=useState([]);

      return <div> 
       <form onSubmit={(e)=>{
         e.preventDefault();
         if(입력값===""){
          alert("글자를 입력하세요")
         return
         }else{
        글제목변경([입력값,...글제목])
        입력값변경("");
         }
         
       }}>
      <input onChange={(e)=>{입력값변경(e.target.value)}} value={입력값}></input>
      <button onClick={()=>{
        // let copy = [...글제목];
        // copy.unshift(입력값);
        // 글제목변경(copy);
      }}>댓글</button>
       </form>
  {  
        글제목.map(function(a, i){
          return (
          <div className="list">
            <h4>{ 글제목[i] }</h4>
            <button onClick={()=>{ 
              let copy = [...글제목];
              copy.splice(i, 1);
              글제목변경(copy);
           }}>삭제</button>
         
          </div> 
          )
        })      
}
      </div>

 

2번째 방법

push 함수를 사용해보기 

import './App.css';
import React,{useState} from "react";

function App() {
  const [Content,setContent] = useState("")
  const [ContentList, setContentList] = useState([]);
  const onSubmit =()=>{
    let tempArr = [...ContentList];
    tempArr.push(Content);
    setContentList(tempArr);
    setContent("")
};

  return (
    <div 
      style={{
        display : " flex ",
        flexDirection:"column",
        alignItems:"center",
        width:"100%",
      }}>

      {ContentList.map((a, i)=>{
        return <div
         key={i}
         style={{
         width:"100%",
         marginLeft:"1rem",
        }}
         >
           내용 : {ContentList[i]}
           <hr/>
           </div>
      })}
       <input type="text" 
        value={Content}
        onChange={(e)=>{
          setContent(e.currentTarget.value)
          }} 
          />
 
        <button 
          onClick={()=>{
          {onSubmit()}
          }}
          style={{marginTop:"1rem"}}>
          제출</button>
    </div>
  );
}

export default App;

push는 배열의 마지막에

unshift는 배열의 첫번째에 값을 추가할 수 있다