배열 항목 수정
App.js
import React, {useRef, useState} from 'react';
import Inner from "./Inner";
import UserList from "./UserList";
import CreateUser from "./CreateUser";
function App() {
const [inputs, setInputs] = useState({
usersname: '',
email: ''
});
const {username, email} = inputs;
const onChange = e => {
const {name,value} = e.target;
setInputs({
...inputs,
[name]: value
});
}
//활성화 구분을 active로 true,false로 동적 처리
const [users, setUsers] = useState ([
{
id: 1,
username: 'a',
email : 'aaa@gmail.com',
active: true
},
{
id: 2,
username: 'b',
email : 'bbb@gmail.com',
active: false
},
{
id: 3,
username: 'c',
email : 'ccc@gmail.com',
active: false
}
]);
const nextId = useRef(4);
const onCreate = () => {
const user = {
id: nextId.current,
username,
email
}
setUsers([...users, user]);
setInputs({
username: '',
email: ''
});
nextId.current += 1;
}
const onRemove = id => {
setUsers(users.filter(user => user.id !== id));
}
// 배열의 불변성을 유지하면서 업데이트 할 때 map 함수 사용
// id 값이 같으면 현상 유지, 다르면 active 값 반전
const onToggle = id => {
setUsers(
users.map(user => user.id === id ? {...user, active: !user.active} : user )
)
}
return (
<React.Fragment>
<Inner>
<CreateUser
username={username}
email={email}
onChange={onChange}
onCreate={onCreate}
/>
<UserList users={users} onRemove={onRemove} onToggle={onToggle}/>
</Inner>
</React.Fragment>
);
}
export default App;
UserList.js
import React from 'react';
// onToggle 받기
const User = ({user, onRemove, onToggle}) => {
return(
<>
// 클릭시 onToggle id 넣어서 호출로 스타일링 구분
<p><b onClick={() => onToggle(user.id)} style={{cursor:'pointer', color: user.active ? 'green' : 'black'}}>{user.username}</b> "{user.email}" <button onClick={() => onRemove(user.id)} type="button">삭제</button></p>
</>
)
}
const UserList = ({users, onRemove, onToggle}) => {
return (
<>
{users.map(user => (
<User user={user} key={user.id} onRemove={onRemove} onToggle={onToggle}/>
))}
</>
)
}
export default UserList;
'Web Tech > react' 카테고리의 다른 글
react 기본 - 13.useMemo (0) | 2021.11.23 |
---|---|
react 기본 - 13.useEffect (0) | 2021.11.23 |
react 기본 - 11.배열 항목 제거 (0) | 2021.11.23 |
react 기본 - 10.배열 항목 추가 (0) | 2021.11.23 |
react 기본 - 10.배열 렌더링 (0) | 2021.11.23 |