[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 21회차 미션

배열에 항목 제거하기

우선 UserList 컴포넌트를 수정한다.

/* UserList */
.
.
function UserList({users, onRemove}){
.
.

UserList function에 onRemove라는 props를 받아와주고 이것을 user컴포넌트에 전달해준다.

/* UserList.js */
    users.map(
        user => (<User user={user} key={user.id} onRemove={onRemove}/>) 
    )

전달을 해 줬으니 이제 user컴포넌트에서 받아와야한다.

/* UserList.js */
.
.
function User({user, onRemove}){
.
.

구리고 user컴포넌트 내부에 삭제버튼을 하나 생성해주도록 한다.

    return(
        <div>
        <b>{user.username}</b><span>({user.email})</span>
        <button>삭제</button>
        </div>
    )

삭제 버튼이 눌렸을때 onRemove가 호출되게 할 것인데, onRemove 함수에 user.id값을 파라미터로 넣어서 호출하고 싶다.

<button onClick={() => onRemove(user.id)}>삭제</button>

onClick으로 새로운 함수를 만들어준다. 파라미터를 넣어주기 위해

 <b>{user.username}</b><span>({user.email})</span>
<button onClick={() => onRemove(user.id)}>삭제</button>

이런식으로 user.username user.email ,, user을 계속 붙여 사용하기 번거롭다면
아래와 같이 미리 추출해서 사용할 수 있다.

function User({user, onRemove}){
    const {username, email, id} = user;
    return(
        <div>
        <b>{username}</b><span>({email})</span>
        <button onClick={() => onRemove(id)}>삭제</button>
        </div>
    )
}

다시, onClick에서 새로운 함수를 정의하는 것은 버튼이 눌렸을 때 onRemove라는 함수를 사용한다. 이 함수의 파라미터로 id(user.id) 값을 넣어 호출을 해준다는 의미이다.

주의할점.

<button onClick={onRemove(id)}>삭제</button>

이렇게 정의해서 사용한다면 페이지가 렌더링되면서 바로 삭제함수가 실행될 것이다.

이제, onRemove 함수를 구현하기 위해 App 컴포넌트를 열어준다.
onRemove를 구현할것인데 배열에서 특정 아이템을 삭제를할때는 불변성을 지키며 상태를 업데이트해야하는데 이때 filter라는 함수를 사용해준다.

filter함수는 배열에서 특정 조건을 만족하는 값들만 따로 추출하여 새로운 배열을 만든다.

/* App.js */
const onRemove = id =>{
  setUsers(users.filter(user => user.id !== id));
}

onRemove라는 id값을 파라미터로 가져와서 어떤 작업을 하는 함수를 만들어준다.
setUsers를 users배열에 filter함수를 사용해서 user객체를 확인하는데 그중 user.id가 파라미터로 가져온것과 일치하지 않는것만 확인해주는것이다. 파라미터가 일치하면 false를 리턴하며 제외된다. 일치하지 않으면 새로운배열을 생성해서 추가해주는 것이다.

여기까지 해서 실행해보면 잘 작동하는 모습을 볼 수 있다.

 

배열에 항목 수정하기.

계정명을 클릭했을 때 계정명의 색이 변하는 기능을 설정해보자.
users라는 배열 내부에 active라는 값을 추가해준다.

/* App.js */
 const [users, setUsers] =useState([
    {
        id: 1,
        username: 'jiwon',
        email: 'pannchat@likelion.org',
        active:true,
    },
    {
        id: 2,
        username: 'tom',
        email: 'tom@tom.org',
        active:false,
    },
    {
        id: 3,
        username: 'sam',
        email: 'sam@sam.org',
        active:false,
    },
]);

그리고 User컴포넌트에도 active를 추가해주고 b태그에 style을 추가 시켜준다.

/* UserList.js */
 const {username, email, id, active} = user;
    return(
        <div>
        <b style={{
            color: active ? 'green': 'black',
            cursor:'pointer'
        }}>{username}</b>
        &nbsp;
        <span>({email})</span>

color 속성에 삼항연산자를 사용해서 true인경우 green을 false인경우 black으로 설정해주고, cursor 속성으로 마우스 오버시에 커서가 pointer 되도록한다.   는 한 칸 띄워주는 코드이다.

이제 클릭시 변화가 일어나게하는 함수를 구현한다

/* App.js */
const onToggle = id =>{
  setUsers(user.map(
    user => user.id === id
    ? { ...user, active: !user.active}
    :user
  ));
};

불변성을 지키며 배열을 update할 때에도 javascript 내장함수 map을 사용할 수 있다.
배열에 있는 특정 item만 업데이트 할 때에도 map함수를 사용한다.
id가 일치하면 업데이트하고 일치하지 않는다면 업데이트 x 하는 방식으로 구현한다.
user 를 파라미터로 가져와서 user.id가 카라미터로 가져온 id값이랑 같다면?
{...user } 불변성지키기위해 기존의 user배열 을가져와서 active 값을 !user.active 하면 호출때마다 active값이 반전된다.

/* App.js */
    <UserList users={users} onRemove={onRemove} onToggle={onToggle}/>

onToggle 전달하고 UserList에서도 onToggle을 받아오고 onClick을 통해 onToggle에 id를 전달한다.

/* UserList.js */
import React from 'react';

function User({user, onRemove, onToggle}){
    const {username, email, id, active} = user;
    return(
        <div>
        <b style={{
            color: active ? 'green': 'black',
            cursor:'pointer'
        }} onClick={() => onToggle(id)}>{username}</b>&nbsp;<span>({email})</span>
        <button onClick={() => onRemove(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;

해당 내용은 아래 링크에서 수강할 수 있다.

프론트엔드 개발 올인원 패키지 with React Online. 👉https://bit.ly/2ETLEzm

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스