App.js
import React, {useRef, useState}from 'react';
// import React from 'react';
import './App.css'
// import InputSample2 from './InputSample2';
import UserList from './UserList';
import CreateUser from './CreateUser';
// []의 의미는 key값으로 쓰겠다는 의미입니다.
// [name] 이 username과 email 두가지의 경우가 있는데,
// onChange라는 하나의 함수로 여러값을 저장하기 위해서 사용한것으로 보여집니다.
// [e.target.name] : e.target.value 이런식으로 state에 저장을하면 input마다
// 다른 함수를 사용하지 않고 여러개 input값을 저장할 수 있습니다.
// username:e.target.value, email: e.target.value
// 이렇게 dynamic하게 key값이 들어갑니다^^
function App() {
const [Inputs, setInputs] = useState({
username : '',
email : '',
id : ''
});
const {username, email, id} = Inputs;
const onChange = (e) => {
const {name, value} = e.target;
setInputs({
...Inputs,
[name] : value
})
}
const [users,setUsers] = useState([
{
id : 1,
username : 'velopert',
email : 'public.velopert@gmail.com',
active : true
},
{
id : 2,
username : 'tester',
email : 'tester@example.com',
active : false
},
{
id : 3,
username : 'liz',
email : 'liz@example.com',
active : false
},
]);
//다음값 id지정
const nextId = useRef(4);
//새롭게 등록할 때
const onCreate = () => {
const user = {
id : nextId.current,
username : username,
email : email
};
setUsers([...users, user]);
setInputs({
username : '',
email : ''
})
nextId.current += 1;
}
//삭제하기위해서는 각 id를 알아야한다
const onRemove = id => {
//user.id가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬
// 즉 user.id 가 id인것만 제거하고 그 외에는 새로배열을 생성
setUsers(users.filter(user => user.id !== id));
}
//수정
const onToggle = id => {
setUsers(
users.map(user => user.id === id ? {...user, active : !user.active} : user)
)
};
//업데이트
const onUpdate = () => {
setUsers (
users.map(user => user.id === id ? {...user, username: username, email : email} : user)
);
setInputs({
username : '',
email : '',
id : ''
})
}
const onModify = (user) => {
setInputs({
username : user.username,
email : user.email,
id : user.id
})
}
return (
<>
<CreateUser
username = {username}
email = {email}
onChange = {onChange}
onCreate = {onCreate}
onUpdate = {onUpdate}
/>
<UserList users={users} onRemove={onRemove} onToggle={onToggle} onModify={onModify}/>
</>
);
// return (
// <InputSample2 />
// )
}
export default App;
JavaScript
복사
UserList.js
import React from 'react';
function User({user, onRemove, onToggle, onModify}) {
return (
<div>
<b style={{
cursor: 'pointer',
color : user.active ? 'green' : 'black'
}} onClick={() => onToggle(user.id)}>{user.username}</b><span>({user.email})</span>
<button onClick={() => onRemove(user.id)}>삭제</button>
<button onClick={() => onModify(user)}>수정</button>
</div>
);
}
function UserList({users, onRemove, onToggle, onModify}) {
return (
<div>
{
users.map(user => (
<User user={user} key={user.id} onRemove={onRemove} onToggle={onToggle} onModify={onModify}/>
))}
</div>
)
}
export default UserList;
JavaScript
복사
CreateUser.js
import React from 'react';
function CreateUser({username, email, onChange, onCreate, onUpdate}) {
return(
<div>
<input name="username"
placeholder="계정명"
onChange={onChange}
value={username}
/>
<input name="email"
placeholder="이메일"
onChange={onChange}
value={email}
/>
<button onClick={onCreate}>등록</button>
<button onClick={onUpdate}>업데이트</button>
</div>
)
}
export default CreateUser;
JavaScript
복사
