2024년 5월 16일 React-List

1. UserList.js

import React from "react"

function User({user}){
    return(
        <div>
            <b>{user.username}</b><span>({user.email})</span>
        </div>
    )
}

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

export default UserList

 

2. ArrayList.js

import React from "react";
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}>등록</button>
        </div>
    )
}
export default CreateUser;

 

3. App.js

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

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: 'apple',
        email: 'apple@apple.com'
    },
    {
        id:2,
        username: 'banana',
        email: 'banana@banana.com'
    },
    {
        id:3,
        username: 'orange',
        email: 'orange@orange.com'
    }
  ])

  const nextId = useRef(4)

  const onCreate = () => {
    const user = {
      id: nextId.currnt,
      username,
      email
    }

    setUsers([...users, user])

    setInputs({
      username:'',
      email:''
    })

    nextId.currnt += 1
  }

  return (
    <>
      <ArrayList username={username} email={email} onChange={onChange} onCreate={onCreate}/>
      <UserList users={users}/>
    </>
  );
}

export default App;