[React] 배열에 항목 수정하기

☕ 이번 시간에는 배열에 항목 수정하기를 해보겠다.

이번에 해볼 것은 이름을 클릭하면 초록색으로 바뀌고, 다시 클릭하면 검정색으로 바뀌는 것을 해볼 것이다.

 

☕ active 변수 만들기

 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

    }

  ]);

그것을 하기전에 우선적으로 해야할 작업은 users 배열 안에 active라는 값을 설정해주는 것이다.

그리고 UserList에서 각 user마다 props로 active를 전달해주고, User 컴포넌트에서 active를 받아온다.

 

function User({id, username, email, onRemove, active}){

    return (

        <div>

            <b style={{

              color: active ? 'green' : 'black',

              cursor: 'pointer'

            }}>{username}

            </b>

            <span>({email})</span>

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

        </div>

    )

}

그리고 해당 부분에 style을 넣어준다. 이전에 style은 객체로 넣어주어야 한다고 했었다.

(자바스크립트 값이기 때문에 중괄호 한번, 그리고 객체로 넣어주어야 하므로 중괄호 한번 이라서 중괄호가 두번 적힌 것이라고 생각하면 된다.)

color가 active 값이 true이면 green을, false라면 black으로 설정하고, 추가적으로 cursor 값을 pointer로 주게 되면 커서가 손가락 모양으로 바뀐다.

 

이렇게 잘 보이는 것을 확인할 수 있다.

 

☕ 클릭하면 작동하도록 본격적으로 만들어보기

이제 클릭하면 색이 변하는 것으로 본격적으로 만들어보자.

const onToggle = (id) => {

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

  }

onToggle이라는 함수를 만든다. 이 함수도 id값을 가지고 실행이 되는데, 불변성을 지키면서 자바스크립트에서 배열을 업데이트할 때에도 map 함수를 사용할 수 있다.

삼항연산자를 사용하여, id가 같으면 여기서도 불변성을 지켜주기 위해서 스프레드 문법으로 객체의 내용을 복사해서 붙여넣고, active 값만 반대로 설정해준다. id가 같지 않다면 그냥 기존의 user를 반환하면 된다.