리액트 - 배열 수정하기

배열의 추가, 삭제까지 연습했었다.

이제는 배열 항목의 내용을 수정하는 방법을 알아보자.

onToggle함수를 선언한다. - name을 클릭하면 글씨의 색이 바뀐다. 만약 바뀐상태에서 한번 더 클릭하면 원래 색으로 돌아온다.
users배열에 active속성을 추가한다.

const [users, setUsers]=useState([
    {
        id: 1,
        username: 'carrot',
        email: 'carrot@gamil.com',
        active: true,
    },
    {
        id: 2,
        username: 'apple',
        email: 'apple@gamil.com',
        active: true,
    },
    {
        id: 3,
        username: 'tomato',
        email: 'tomato@gamil.com',
        active: false,
    }
]);

UserList.js의 User컴포넌트에서 style을 추가한다.

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>
    );
}

active 값이 true 일 경우 텍스트의 색을 green으로, 그 반대라면 black으로 변경된다.

App.js에 onToggle을 선언한다.

const onToggle = id => {
  setUsers(users.map(user =>user.id ===id
    ? {...user, active: !user.active} 
    : user
    ));
}

클릭했을 때, users배열의 상태를 변경하는 setUsers로 user의 active속성을 반대로 변환시킨다.
"항목 하나만 바꾸면 되는거 아닌가?" -> 불변성 유지! 배열의 항목을 변경시키기 위해서는 새로운 배열 하나를 만들어서(...user) 그 배열의 항목을 변경한다.

결과 화면!

닉네임을 클릭하면 색이 성공적으로 변한다.