[React] input data 추가하기 & 글 삭제 버튼

출처 : 코딩애플 React 강의 과제  

 

 

1. 유저가 입력한 데이터 추가, 글 삭제버튼

(응용 1. 빈 입력값 체크  /  응용 2. 좋아요 추가 / 응용3. 날짜 추가)

 

• e.target으로 받은 유저의 입력값을 in_data에 담아 useState(spread를 사용하여)로 logo 데이터에 추가시켰다. 
• 삼항연산자를 이용해 유저 입력값(in_data)이 공백이 아닌 경우에만 실행되도록 했다.
• useState를 이용해 새로 만들어진 글에 좋아요 데이터를 하나 더 추가했다.
• 현재 날짜는 date함수를 통해 가져와서 발행일자에 입력했다.
• 삭제 버튼의 경우는 splice()함수를 통해 구현했다.

 

 

2. 작성한 코드

 

function App() {
  //데이터변수
  let [logo,setLogo] = useState(["오늘의 추천음식","강남운동맛집","강남핫플레이스","여자코트추천"]);
  //좋아요변수
  let [like_count,setlike] = useState([0,0,0,0]);
  //저장용 변수
  let [in_data,setinput] = useState('');
  //타이틀
  let [title, setitle] = useState(0);
  
  //현재날짜
  const today = new Date();
  const formattedDate = `${today.getFullYear()}년 ${today.getMonth() + 1}월 ${today.getDate()}일`;

  
  function title_ch(i){
    setitle(i);
  }

  //좋아요 기능 함수
  function test(i){
    let n_count = [...like_count];
    n_count[i] = (n_count[i]+1);
    setlike(n_count);
  }
   //타이틀 삭제버튼 
  function title_del(i){
    let del_data = [...logo];
    del_data.splice(i,1);
    setLogo(del_data);
  }

  return (
<div>
	{
         logo.map(function(a,i){
            return (
            <div className='list' key={i}>  
              <h4 onClick={()=>title_ch(i)}>{ a } <span onClick={(e)=>e.stopPropagation(test(i))}>👍</span> {like_count[i]} </h4>
              <p>{formattedDate} 발행</p>
               <button className='iam_delbtn' onClick={()=>{title_del(i)}}> 삭제버튼 </button>
           </div>  
          )
       })
    }
  

  {
	<div>
 		<input onChange={(e)=>{setinput(e.target.value);}}></input>
    	<button onClick={()=>{ in_data != '' && setLogo([...logo,in_data]); setlike([...like_count,0]);}}>input버튼</button>
 	</div>
  }
  </div>
  );

}

export default App;

 

 

3. 기타 팁 (정리)

 

• input 데이터 추가 문제는 unshift() 또는 concat  이용해도 해결 가능하다. 

 

예 : concat , unshift

 /*concat*/ 
<button onClick={()=>{setLogo(logo.concat(in_data));}}> input버튼 </button>    

/*unshift*/
<button onClick={()=>{ let copy = [...logo]; copy.unshift(in_data); setLogo(copy);  }}> 발행버튼 </button>

 

• unshift()  : 배열의 맨 앞에 하나 이상의 요소를 추가하는 메서드  
• splice()  : 배열에서 요소를 삭제하고 새로운 요소를 추가

 

예 : splice() 

 

button onClick={()=>{
                 let del_title = [...logo];
                 del_title.splice(i,1);
                 setLogo(del_title);
              }}>삭제</button>

 

• Spread : es6에 추가된 문법 ...을 사용해 배열의 값을 받고 확장시킬 수 있는 문법
  
• concat() : 기존 배열과 다른 배열의 값을 결합해 새로운 배열을 반환하는 메서드