React - 배열에서 항목 수정하기

- 각 계정명 클릭하면 초록색으로 바뀌고, 다시 누르면 다시 검정색으로 변하도록

 

- App.js -

1. 배열 내의 객체에 각각 변수(active) 추가

const [users, setUsers] = useState([
    {
      id: 1,
      username: 'starters',
      email: 'public.starters@gmail.com',
      active: true,
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@gmail.com',
      active: false,
    },
    {
      id: 3,
      username: 'jajajojo',
      email: 'jajajojo@gmail.com',
      active: false,
    }
  ]);

 

- UserList.js -

2. active 변수 추가하고, style 설정

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

 

- App.js -

3. onToggle() 이라는 함수 추가 - map함수 사용

- 배열을 새로 만들지만, id값이 같을 때와 같이 않을 때 등 조건에 따라 동작되도록 한다.

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

...user spread 문법 사용 - user객체를 업데이트 할 때도 불변성을 유지시켜 주어야하기 때문

active: !user.active - onToggle() 이 호출될 때마다, active값이 반정되도록 함

만약 user.id가 일치하지 않으면, 그냥 user를 반환

 

4. onToggle() 함수 UserList에 전달해줌

return (
    <>
      <CreateUser
      username={username}
      email={email}
      onChange={onChange}
      onCreate={onCreate}/>
      <UserList users={users} onRemove={onRemove} onToggle={onToggle}/>
    </>
  );

 

5. 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;

 

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: 'starters',
      email: 'public.starters@gmail.com',
      active: true,
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@gmail.com',
      active: false,
    },
    {
      id: 3,
      username: 'jajajojo',
      email: 'jajajojo@gmail.com',
      active: false,
    }
  ]);

  const nextId = useRef(4);

  const onCreate = () => {
    const user = {
      id: nextId.current,
      username,
      email,
    };
    setUsers(users.concat(user)); // concat은 기존 배열을 해치지않고 합칠 수 있어서 다른 방안이 될 수 있음
    setInputs({
      username: '',
      email: ''
    });

    console.log(nextId.current);

    nextId.current += 1;
  };

  const onRemove = 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;

 

 

 

 

React - 배열에서 항목 제거하기

 

Javascript 배열 내장함수(map)