[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 24회차 미션 - 30강 React 배열항목 제거 및 수정하기
배열항목 제거하기
먼저 기존에 만들어놨던 UserList.js에 onRemove를 추가해보자.
UserList.js
import React from 'react';
function User({ user, onRemove }){
const {username, email, id} = user;
return(
<div>
<b>{username}</b><span>({email})</span>
<button
//onRemove(id)이런식으로 쓰면 안됨
onClick={() => onRemove(id)}>삭제</button>
</div>
)
}
function UserList({ users, onRemove }){
return(
<div>
{
users.map(
(user, index) => (
<User
user={user}
key={user.id}
onRemove={onRemove}
/>)
)
}
</div>
)
}
export default UserList;
위와 같이 onRemove를 추가해준다. 여기서 유의해야 할 점은 User함수안에서 삭제 버튼을 클릭하고 onRemove를 호출할 때 onClick={() => onRemove(id)}로 써줘야 한다는 점이다. 왜냐하면 onClick={onRemove(id)}식으로 함수를 바로 호출하는 코드를 쓰면 랜더링 되자마자 클릭을 하기도 전에 바로 함수를 호출해서 모든 리스트가 삭제돼 버린다. 이점을 꼭 기억하도록 하자. 그리고 App.js로 넘어가서 onRemove를 만들어준다.
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: 'bmyu',
email: 'bomee88@naver.com'
},
{
id: 2,
username: 'tester',
email: 'tester@example.com'
},
{
id: 3,
username: 'sample',
email: 'sample@example.com'
}
]);
const nextId = useRef(4);
const onCreate = () => {
const user = {
id: nextId.current,
username,
email,
};
setUsers(users.concat(user));
setInputs({
username: '',
email:''
})
console.log(nextId.current);
nextId.current += 1;
}
const onRemove = 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;
이렇게 수정하고 react를 돌려보자. 삭제를 누르면 제대로 삭제되는 것을 볼 수 있다.
배열항목 수정하기
유저에 active라는 상태를 추가하고 true일 경우 폰트가 그린으로, false일 경우 폰트가 검정으로 나오도록 해볼 것이다. App.js에 users,setUsers에 아래와 같이 active상태를 추가해보자.
App.js
const [users, setUsers] = useState([
{
id: 1,
username: 'bmyu',
email: 'bomee88@naver.com',
active: true,
},
{
id: 2,
username: 'tester',
email: 'tester@example.com',
active: false,
},
{
id: 3,
username: 'sample',
email: 'sample@example.com',
active: false,
}
]);
그리고 이번에는 UserList에 User함수에 active의 상태에 따라 폰트색을 결정할 수 있도록 자바스크립트의 삼항연산자에 리액트 형태의 css를 사용하여 color: active ? ‘green’ : ‘black’ 이렇게 작성해본다.
UserList.js
function User({ user, onRemove }){
const {username, email, id, active} = user; //active추가
return(
<div>
<b style=>
{username}
</b>
<span>({email})</span>
<button onClick={() => onRemove(id)}>삭제</button>
</div>
)
}
그리고 다시 App.js로 돌아와서 아래와 같이 onToggle을 추가해준다.
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: 'bmyu',
email: 'bomee88@naver.com',
active: true,
},
{
id: 2,
username: 'tester',
email: 'tester@example.com',
active: false,
},
{
id: 3,
username: 'sample',
email: 'sample@example.com',
active: false,
}
]);
const nextId = useRef(4);
const onCreate = () => {
const user = {
id: nextId.current,
username,
email,
};
setUsers(users.concat(user));
setInputs({
username: '',
email:''
})
console.log(nextId.current);
nextId.current += 1;
}
const onRemove = id => {
setUsers(users.filter(user => user.id !== id));
}
const onToggle = id => { //onToggle추가
setUsers(users.map(
user => user.id ===id? { ...user, active: !user.active }
:user
))
}
return(
<>
<CreateUser
username={username}
email={email}
onChange={onChange}
onCreate={onCreate}
/>
<UserList
//onToggle 추가
users={users} onRemove={onRemove} onToggle={onToggle}/>
</>
)
}
export default App;
그리고 다시 UserList에서 클릭하면 onToggle을 실행할 수 있게 만들어준다.
UserList.js
import React from 'react';
function User({ user, onRemove, onToggle }){ //onToggle추가
const {username, email, id, active} = user;
return(
<div>
<b
style=
onClick={() => onToggle(id)} //onToggle추가
>
{username}
</b>
<span>({email})</span>
<button onClick={() => onRemove(id)}>삭제</button>
</div>
)
}
function UserList({ users, onRemove, onToggle }){ //onToggle추가
return(
<div>
{
users.map(
(user, index) => (
<User
//onToggle추가
user={user}
key={user.id}
onRemove={onRemove}
onToggle={onToggle}
/>)
)
}
</div>
)
}
export default UserList;
이렇게 하고 이제 리액트를 실행시켜서 계정명을 클릭해보자.
그린이 블랙으로 블랙은 그린으로 색깔이 토글되는 것을 볼 수 있을 것이다.
자 지금까지 했던 것을 한번 정리해보자. 먼저 배열안에 있는 값을 수정하거나 제거하거나 추가할때 불변성을 유지하기 위해 스프레드 연산자를 사용하거나 concat 배열내장함수를 사용했고, 제거할때는 filter함수를 사용했다. 또 특정값만 업데이트 할때에는 map 함수를 사용했다. 이런 부분들을 기억하고 있도록 하자!
오늘은 여기까지..
시청 영상 30강 15~16까지
프론트엔드 개발 올인원 패키지 with React Online. 👉 https://bit.ly/31Cf1hp
Comments