#8 집에서 벗어나기
배열에 항목 삭제하기
이번에는 배열에 있는 항목을 제거하는 방법에 대해 알아보겠다.
UserList에서 삭제 버튼을 렌더링하겠다.
UserList.js
import React from 'react';
function User({ user, onRemove }) {
return (
<div>
<b>{user.username}</b> <span>({user.email})</span>
<button onClick={() => onRemove(user.id)}>삭제</button>
</div>
);
}
function UserList({ users, onRemove }) {
return (
<div>
{users.map(user => (
<User user={user} key={user.id} onRemove={onRemove} />
))}
</div>
);
}
export default UserList;
User 컴포넌트의 삭제 버튼이 클릭 되었을 때, user.id 값 앞으로 props로 받아올 onRemove 함수의 파라미터로 넣어서 호출해줘야 한다.
여기서 onRemove 함수는 UserList 컴포넌트에서도 전달 받을것이며, 그대로 User 컴포넌트로 전달해준다.
onRemove 함수를 구현할려면 불변성을 지키면서 업데이트를 해주어야 한다.
이 때, 특정 요소를 배열에서 제거하기 위해서 filter 배열 내장 함수를 사용하는것이 이상적이다.
filter 함수는 특정 조건이 만족하는 요소들만 추출해서 새로운 배열로 만들어준다.
App 컴포넌트에서 onRemove 함수를 구현한 후, UserList에 전달하겠다.
밑에 있는 코드를 참고하면된다.
App.js
import React, { useRef, useState } from 'react';
import UserList from './UserList';
import CreateUser from './CreateUser';
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: 'velopert',
email: 'public.velopert@gmail.com'
},
{
id: 2,
username: 'tester',
email: 'tester@example.com'
},
{
id: 3,
username: 'liz',
email: 'liz@example.com'
}
]);
const nextId = useRef(4);
const onCreate = () => {
const user = {
id: nextId.current,
username,
email
};
setUsers(users.concat(user));
setInputs({
username: '',
email: ''
});
nextId.current += 1;
};
const onRemove = id => {
// user.id 가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬
// = user.id 가 id 인 것을 제거함
setUsers(users.filter(user => user.id !== id));
};
return (
<>
<CreateUser
username={username}
email={email}
onChange={onChange}
onCreate={onCreate}
/>
<UserList users={users} onRemove={onRemove} />
</>
);
}
export default App;filter 함수를 쓴 예
setUsers(users.filter(user => user.id !== id));안에 조건에 해당되는 요소들은 새로운 배열로 생성되서 출력된다.
이제 실제로 버튼을 누르면 삭제되는지 확인하면된다.
삭제되기 전
삭제된 후
배열 항목 수정하기
배열을 추가하고 삭제해봤으니, 수정하는 방법을 알아보겠다.
User 컴포넌트에 계정명을 클릭했을때 색깔이 초록새으로 바뀌고, 다시 누르면 검정색으로 바뀌도록 구현을 해보겠다.
App 컴포넌트에 users 배열 안의 객체 안에 active 라는 새로운 속성을 추가해준다.
App.js
import React, { useRef, useState } from 'react';
import UserList from './UserList';
import CreateUser from './CreateUser';
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: '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
}
]);
const nextId = useRef(4);
const onCreate = () => {
const user = {
id: nextId.current,
username,
email
};
setUsers(users.concat(user));
setInputs({
username: '',
email: ''
});
nextId.current += 1;
};
const onRemove = id => {
// user.id 가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬
// = user.id 가 id 인 것을 제거함
setUsers(users.filter(user => user.id !== id));
};
return (
<>
<CreateUser
username={username}
email={email}
onChange={onChange}
onCreate={onCreate}
/>
<UserList users={users} onRemove={onRemove} onToggle={onToggle} />
</>
);
}
export default App;그 다음에는, UserList를 수정해서 active 값에 따라 폰트의 색상을 바꿔주도록 만들어보겠다.
UserList.js
import React from 'react';
function User({ user, onRemove }) {
return (
<div>
<b
style={{
cursor: 'pointer',
color: user.active ? 'green' : 'black'
}}
>
{user.username}
</b>
<span>({user.email})</span>
<button onClick={() => onRemove(user.id)}>삭제</button>
</div>
);
}
function UserList({ users, onRemove }) {
return (
<div>
{users.map(user => (
<User user={user} key={user.id} onRemove={onRemove} />
))}
</div>
);
}
export default UserList;
이제 App 파일에서 onToggle 함수를 구현해보겠다. 배열을 업데이트 할 때에는 map 함수를 사용하면된다.
App.js
import React, { useRef, useState } from 'react';
import UserList from './UserList';
import CreateUser from './CreateUser';
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: '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
}
]);
const nextId = useRef(4);
const onCreate = () => {
const user = {
id: nextId.current,
username,
email
};
setUsers(users.concat(user));
setInputs({
username: '',
email: ''
});
nextId.current += 1;
};
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
)
);
};
return (
<>
<CreateUser
username={username}
email={email}
onChange={onChange}
onCreate={onCreate}
/>
<UserList users={users} onRemove={onRemove} onToggle={onToggle} />
</>
);
}
export default App;그 다음에는, UserList 컴포넌트에서 onToggle를 받아와서 User에게 전달하고, id 를 넣어서 호출해준다.
UserList.js
import React from 'react';
function User({ user, onRemove, onToggle }) {
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>
</div>
);
}
function UserList({ users, onRemove, onToggle }) {
return (
<div>
{users.map(user => (
<User
user={user}
key={user.id}
onRemove={onRemove}
onToggle={onToggle}
/>
))}
</div>
);
}
export default UserList;
계정명을 클릭했을 때, 초록색으로 색이 바뀌는지 확인해보면된다.
참고 : 벨로퍼트와 함께하는 모던 리액트
느낀점 :
- 오늘은 배열의 항목을 삭제하는 방법과 수정하는 방법에 대해 알아보는 시간을 가졌습니다.
- Props으로 함수도 보낼 수 있어서 편리한 것 같다.
하루를 의미있게 살자!