[코딩애플;React]인풋태그 다루기

1. 리액트에서 사용하는 대표적인 인풋태그들

<input type="text"/>

<input type="range"/>

<input type="date"/>

<input type="number"/>

<textarea></textarea>

<select></select>

 

2.input태그에 뭔가 입력했을 때 코드 실행하려면

:onChange나 onInput 이벤트 핸들러를 부착함.

<input onChange={()=>{ 실행할코드 }}/>

 

3.input태그에 입력한 값 가져오기

<input onChange={(e)=>{ console.log(e.target.value) }}/>

 

4.사용자가 입력한 데이터 저장하기

function App (){

let [입력값, 입력값변경] = useState('');

return (

  <input onChange={(e)=>{

    입력값변경(e.target.value)

    console.log(입력값)

  }} />

)

}

 

📚숙제 1. 인풋태그에 입력하면 새로운 글 추가하기

1. 날짜를 입력하기 편한 moment.js 선언 

import moment from 'moment';

https://yeolceo.tistory.com/69

쉽게 배우는 React 로 달력 만들기 with Moment.js -YEOL

 

2.날짜 state, 입력받는 내용 state 선언

let [입력값, 입력값변경] =useState('');

  let [날짜,날짜변경]=useState(['12월 21일 발행','12월 22일 발행','12월 23일 발행']);

 

3.인풋창과 추가 버튼에 기능 추가하기

    <input onChange={(e)=>{

        입력값변경(e.target.value);

        }}/>

        <button onClick={(e)=>{

          let 입력내용 = document.querySelector('input').value;

       

         

          if(입력내용 !== ''){          

            const newList = 글제목.concat(입력내용);

            글제목변경(newList);

             

          }          

        }}>글변경</button>

 

*concat(추가 내용) : 배열 안에 추가내용대로 추가하기 

 

📚숙제 2. 삭제버튼 만들기

{

           글제목.map(function(a,i){

            return(

              <div className="list" key={i}>

              <h4  onClick={()=>{setModal(!modal); setTitle(i)}}>{글제목[i]}<span onClick={()=>{

                let copy = [...따봉];

                copy[i] = copy[i]+1;

                따봉변경(copy)

              }}>👍</span>{따봉[i]}</h4>

              <p>2월 17일 발행</p>

              <button onClick={()=>{

                let copy =[...글제목]

                copy.splice(i,1);

                글제목변경(copy)

              }}>삭제</button>

              <hr/>

            </div>

            )

          })

      }

 

*배열이름.splice(삭제하고 싶은 인덱스 번호, 인덱스포함한 삭제할 자료 개수)

 

📚숙제 3.새로 만든 글에 좋아요 NaN으로 뜨는  수정하기

        <button onClick={(e)=>{

          let 입력내용 = document.querySelector('input').value;

          let like = 0;

         

          if(입력내용 !== ''){          

            const newList = 글제목.concat(입력내용);

            글제목변경(newList);

            const new_like = 따봉.concat(like);

            따봉변경(new_like);  

                       

          }          

        }}>글변경</button>

 

좋아요 수를 0으로 선언해주고

새로 변경되는 좋아요를 포함한 배열을 변수로 담는다(new_like)

그리고 따봉 변경함수 따봉변경에 new_like 담아주기

 

📚숙제 4. 글 작성한 날짜로 새로운 글 안에 날짜 기록하기

import moment from 'moment';

moment.js로 사용해서 해보기!

 

 <button onClick={(e)=>{

          let 입력내용 = document.querySelector('input').value;

          let like = 0;

         

          if(입력내용 !== ''){          

            const newList = 글제목.concat(입력내용);

            글제목변경(newList);

            const new_like = 따봉.concat(like);

            따봉변경(new_like);  

            const nowTime =moment().format('MM월DD일 발행');

            const timeList = 날짜.concat(nowTime);

            날짜변경(timeList);            

          }          

        }}>글변경</button>

 

 

좋아요 처럼 새로 들어갈 날짜 변수를 지정해주고, 그것을 추가할 새로운 배열 선언.

그리고 날짜 변경함수 날짜변경에 넣어줌!!