배열에 항목 수정하기

 

배열에 항목 수정하기

 

User 컴포넌트에 계정명을 클릭했을 때 색상이 바뀌고,

다시 누르면 검정색으로 바뀌도록 구현하기

 

 

users 배열 안의 객체 안에 active라는 속성을 추가해준다. 

App.js

  const [users, setUsers] = useState([
      {
        id : 1, 
        username : 'silver',
        email: 'public.les0498@gmail.com' , 
        active: true
      },
      {
        id : 2, 
        username : 'tester',
        email: 'tester@example.com',
        active: false
      },
      {
        id : 3, 
        username : 'gold',
        email: 'gold@example.com',
        active: false
      },

 

 

UserList.js 

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

 

true일 때 초록색을 false일 때 검정색이 되도록 설정해줬다. 

 

 

 

이제 onToggle함수를 구현해보려한다.

글씨를 클릭했을 때 상태가 변화하도록 만들어주는 것 이다. 

 

(new !!) App.js

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

 

 

App.js에서 onToggle을 만들어줬으면 UserList 컴포넌트에서 onToggle을 받아와서 User에게 전달해준다. 

onRemove 구현방식처럼 onToggle에 id를 넣어 호출해준다.  

 

(new !!)  UserList.js 

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

function UserList({ users, onRemove, onToggle }) {
  return (
    <div>
      {users.map(user => (
        <User 
          user={user} 
          key = {user.id} 
          onRemove={onRemove} 
          onToggle={onToggle}
        />
      ))}
    </div>
  );
}

 

 

 

 

이렇게 하면 user를 클릭했을 때 

글씨가 초록색으로 변하고 또 다시 눌렀을 때 글씨가 검정색으로

변하는 것을 볼 수 있다.