React input

리액트에서 input창을 만들고싶다, 그리고 입력하고싶다 간단하게 해보자.

 

<input></input>

이와같이만 해줘도 인풋창이 생긴다! 지금은

 

인풋창에다가 글자를 입력해서 맨위에 추가하는 기능을 만들고싶다.

 

두가지를 해야한다

 

input창에서 onChange이벤트를주고

 

button에서 onClick이벤트를 줘야한다.

 

let [글발행,글발행변경] = useState('');

 

이와같은형태로 let[a,b] =useState()를 사용해준다.

 

문자열 형태로 state를 사용해줘서 input 창에서 입력 event가 발생할때마다 a에 저장이된다.

 

그리고 최종적으로 버튼을 클릭하면 맨위에 변경함수를 다시 사용해

 

deepcopy를 이용해 배열을 복사후 unshift로 추가해서 새로 추가해주는 형식을 사용한다.

 

{글발행}
    <div className='publish'>
      <input onChange={ (e)=>{글발행변경(e.target.value)} }></input>
      <button onClick = { ()=>{ 
        var arrayCopy = [...글제목]
        arrayCopy.unshift(글발행)
        // push썻는데 앞에 하려면 unshift가 맞지!
        글제목변경(arrayCopy)
       } }>저장</button>
    </div>

따로 function을 만들어 줘도되지만 화살표 함수내에서 간단하게 사용도 가능하다.

 

-모든코드

/* eslint-disable */
import logo from './logo.svg';
import './App.css';
import {useState} from 'react'

function App() {


  let [글제목, 글제목변경] = useState(['서울','대구','대전','광주'])
  let [따봉,따봉변경] = useState([0,0,0,0])

  let [modal,modal변경] = useState(false) 
  let posts = "군자 훠궈 맛집" 
  let [누른제목,누른제목변경] = useState(0);

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

  let [글발행,글발행변경] = useState('');

  // function 글발행하기(){
  //   console('글발행하기')
  //   var newArray = [...글제목]
  //   newArray.push(글발행)
  // }

  function 제목바꾸기(){
    console('제목바꾸기')
    var newArray = [...글제목]
    newArray[0] = '뉴욕'
    newArray = newArray.sort()    
    글제목변경(newArray)
  }

  function 따봉바꾸기(index){
    var newArray = [...따봉]
    newArray[index] = newArray[index] + 1
    따봉변경(newArray)
  }

  


  return (
    <div className="App">
      <div className="black-nav">
        <div >개발 BLOG</div>
      </div>
     
      

      {
        글제목.map(function(글, i){
          return(
            <div className='list' key={i}>
              {/* map함수안에 key넣어줘야 경고가 안뜸 참고, 0,1,2이런값 넣어주기 */}
              <h3 onClick={ ()=>{ 누른제목변경(i)}} > {글} <span onClick={() => {따봉바꾸기(i)}}>🥰좋아요!</span> {따봉[i]}</h3>
              <p>1월 10일 발행</p>
              <hr/>
            </div>
          )
        })
      }

      {/* {입력값}  
    <input onChange={ (e)=>{ 입력값변경(e.target.value) } }></input> */}
    
    {/* 입력이 될때 함수가 실행됨 */}
    {글발행}
    <div className='publish'>
      <input onChange={ (e)=>{글발행변경(e.target.value)} }></input>
      <button onClick = { ()=>{ 
        var arrayCopy = [...글제목]
        arrayCopy.unshift(글발행)
        // push썻는데 앞에 하려면 unshift가 맞지!
        글제목변경(arrayCopy)
       } }>저장</button>
    </div>


      <button onClick = {()=>{modal변경(!modal)}}>모달창</button>

      {
        modal === true
        ? <Modal 글제목 = {글제목} 누른제목 = {누른제목}></Modal> 
        : null
      }
         
    </div>
  );
}

function Modal(props){ 
  return(
    <div className="modal">
        <h2>제목 {props.글제목[props.누른제목]}</h2> 
        <p>날짜</p>
        <p>상세내용</p>
      </div>
  )
}

<input></input>

export default App;