리액트 useState UseRef 컴포넌트

*(아래)초기화 시, 앞의 인풋에 focus 오는것까지

내가 만든 것 :

app.js

import CreateUser from "./CreateUser";
import React, {useState, useRef} from 'react'
import UserList from "./UserList";

export default function App(){
const [inputs,setInputs] =useState({
   username:'',
   email:''
})

const {username,email}= inputs

const onChange =(e)=>{
 const {name, value}=e.target
 setInputs({
   ...inputs,
   [name]:value
 })
}
  const [users,setUsers]=useState([
        {
            id:1,
            username:'mimii',
            email:'a@naver.com',
            active:true
        },
        {
            id:2,
            username:'mom',
            email:'b@naver.com',
            active:false
      },
        {
            id:3,
            username:'papa',
            email:'c@naver.com',
           active:false

        }
    ])
    
  
    const nextId = useRef(4);
    const onCreate = () => {
      setInputs({
        username:"",
      email:""}
        )

        const user ={
          id:nextId.current,
          username,
          email

        }

      setUsers([...users,user])
      nextId.current +=1
      console.log(nextId.current) //함수가 실행될때 찍힘 
    }
  
    const onRemove = (id) =>{
      setUsers(
        users.filter(user =>(
         user.id !== id
        ))
      )
    }
    const onToggle =(id) =>{
      setUsers(
        users.map(user => user.id ===id?{...user, active:!user.active}  :user)
      )
    }
  return(
    <div>
<CreateUser
username={username} 
email={email} 
onChange={onChange} 
onCreate={onCreate}/>

<UserList users={users} 
onRemove={onRemove}
onToggle={onToggle}/>
</div>
  )


}

CreateUser.js

export default function CreateUser({username, email, onChange, onCreate}){

    return(
        <div>
            <input 
            name="username"
            placeholder="계정명"
            onChange={onChange}
            value={username}
            />
             <input 
            name="email"
            placeholder="이메일"
            onChange={onChange}
            value={email}
            />
            <button onClick={onCreate}>등록HA</button>
        </div>
    )
}

UserList.js

import React, {useEffect} from 'react'


export default function UserList({users,onRemove,onToggle}){
   
    return(
<div>
 {  users.map(
       (user,index) => (<User user={user} key={index} onRemove={onRemove} onToggle={onToggle}/>) 
   )
   }
</div>

    )
}

function User({user,onRemove,onToggle}){
    
    useEffect (()=>{
        console.log('user값이 설정됨')
        console.log(user)
        return () =>{
            console.log('user값이 바뀌기전')
            console.log(user)
        }
    },[user])
    return(
        <div>
            <b 
            style={{color: user.active?'pink':'skyblue',
                    cursor:'pointer'}}
            onClick={()=>onToggle(user.id)}
            > {user.username}</b><span>({user.email})</span>
            <button onClick={()=>onRemove(user.id)}>삭제</button>
        </div>

    )
}

counter.js

import React, {useState} from 'react'

export default function Counter(){
const [number, setNumber] =useState(0)

const plus = () =>{
 setNumber(number=>number+1)
 console.log('2')
}

const minus= () =>{
  setNumber(number=>number-2)
}

    return(
<>
        <div style={{
            fontSize:'40px',
            paddingLeft:'40px'
            }}>{number}</div>
        <button onClick={plus}>플러스</button>
        <button onClick={minus}>마이너스</button>
</>


    )
}

InputSample

import React, {useState, useRef} from 'react'

export default function InputSample(){

    const [inputs,setInputs] =useState({
        myName:'',
        nickName:''
    })

    const {myName,nickName} =inputs

    const onChange = (e) => {
    const{name,value} =e.target
  setInputs({...inputs,
            [name]:value})
}

const onClick =() =>{
    setInputs({
        myName:'',
        nickName:''
    })
aaa.current.focus()
}

const aaa =useRef()

    return(<div>

        <input onChange={onChange} 
        placeholder="이름" 
        name='myName' 
        value={myName}
        ref={aaa}
        />
        <input onChange={onChange} placeholder="닉네임" name='nickName' value={nickName}/>
        <button onClick={onClick} >초기화</button>
        <div><b>값 :</b> {myName}({nickName})</div>
        

    </div>)
}