[React]가져다가 유용하게 쓸수 있는 component

버튼만드는 const 함수

import React, { useState } from 'react';

const App = () => {
  
  const setFocus = () => { 
    setMsg('')
    cuser.current.focus();
  }
  

  const [inputText, setMsg] = useState('')
  const onChange = (event) => {
    setMsg(event.target.value)
  }


  const cuser = React.createRef();

  return (
    <div>
      {/* value로 값을 넣어주는데 ''으로 들어가 있기때문에 값의 변화를 주기위해서는 onChange가 필요하다.*/}
      <input value={inputText} onChange={onChange} ref={cuser} />
      <button onClick={setFocus}>버튼</button>

    </div>
  )
}

export default App;

 

 

버튼을 누르면 '호랑이'가 추가되는 const

import React, { useState } from 'react';

const App = () => {
  
  const [list, setList] = useState([
    
  ])

  const allList = list.map((n, k) => <li key={k}>{n.text}</li>)

  const setFocus = () => {
    setList([
      ...list,
      {text:'호랑이'},
    ])
  }
  return (
    <div>
      <ul>{allList}</ul>
      <button onClick={setFocus}>추가</button>
    </div>
  )
}

export default App;

 

list를 클릭할때마다 삭제하는 코드

import React, { useState } from 'react';

const App = () => {
  
  const [list, setList] = useState([
    {text : '호랑이'},
    {text : '호랑이'},
    {text : '호랑이'},
    {text : '호랑이'},
  ])

  const onRemove = (k) => {
    const del = list.filter((obj)=>{
      return obj !== k
    })
    setList(del)
  }

  const allList = list.map(
    (n, k) => <li key={k} onClick={()=>{onRemove(n)}}>{n.text}</li>
  )

  return (
    <div>
      <ul>{allList}</ul>
    </div>
  )
}

export default App;

 

시뮬레이션 버튼 코드

10가지의 문자열이 있는데 버튼을 누를때마다 랜덤으로 하나씩 들어가도록한다

import React, { useState } from 'react';

const App = () => {
  const arr = [
    '호랑이',
    '사자', 
    '펭귄', 
    '토끼',
    '다람쥐',
    '고양이',
    '생쥐',
    '강아지',
    '햄스터',
    '코끼리',
  ]

  const setFocus = () => {
    let a = Math.floor(Math.random()*10)

    setinputText(arr[a])
  }
  
  const [inputText, setinputText] = useState('')

  const onChange = () =>{}
  
  return (
    <div>
      <input onChange={onChange} value={inputText}/>
      <button onClick={setFocus}>랜덤추가</button>
    </div>
  )
}

export default App;