배열에 항목 수정하기

User 컴포넌트에 계정명을 클릭했을 때 색상이 초록색으로 바뀌고, 다시 누르면 검정색으로 바뀌도록 구현해보자

 

users 배열안에 active 라는 속성을 추가해주자

 

App.js 

 

import React, {useRef, useState} from 'react';
import CreateUser from './components/CreateUser';
import UserList from "./components/UserList";

function App() {

    const [inputs, setInputs] = useState({
        username: '',
        email: ''
    });

    const {username, email} = inputs;

    const onChange = e => {
      const { name, value } = e.target;
      setInputs({
          // spread
          ...inputs,
          [name]: value
      });
    };

    // useState 를 사용하여 컴포넌트의 상태로 관리
    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
        }
    ]);

    const nextId = useRef(4);
    const onCreate = () => {
        // 나중에 구현 할 배열에 항목 추가하는 로직
        // ...

        const user = {
            id: nextId.current,
            username,
            email
        };
        // concat 함수
        setUsers(users.concat(user));
        
        // spread 함수
        // setUsers([
        //     //spread 문법
        //     ...users,user
        // ]);

        setInputs({
            username: '',
            email: ''
        });

        nextId.current += 1;
    };

    const onRemove = id => {
    //    user.id 가 파라미터로 일치하지 않는 우너소만 추출해서 새로운 배열을 만듬
    //    = user.id 가 id 인 것을 제거함
        setUsers(users.filter(user => user.id !== id));
    }

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


export default App;

 

다음으로는 User 컴포넌트에서 방금 넣은 active 값에 따라 폰트의 색상을 바꾸고, 마우스 커서를 대면 손 모양으로 바뀌게 해보자

 

UserList.js

 

import React from "react";

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

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

export default UserList;

결과

계정에 마우스를 올리면 손가락 표시가 뜬다 ㅇ.ㅇ

 

App.js 에서 onToggle 함수를 구현해보자

배열의 불변성을 유지 하면서 배열을 업데이트 할 때에도 map 함수를 사용할 수 있다.

id 값을 비교해서 id 가 다르다면 그대로 두고 같다면 active 값을 반전 시키도록 구현ㄱㄱ

 

import React, {useRef, useState} from 'react';
import CreateUser from './components/CreateUser';
import UserList from "./components/UserList";

function App() {

    const [inputs, setInputs] = useState({
        username: '',
        email: ''
    });

    const {username, email} = inputs;

    const onChange = e => {
      const { name, value } = e.target;
      setInputs({
          // spread
          ...inputs,
          [name]: value
      });
    };

    // useState 를 사용하여 컴포넌트의 상태로 관리
    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
        }
    ]);

    const nextId = useRef(4);
    const onCreate = () => {
        // 나중에 구현 할 배열에 항목 추가하는 로직
        // ...

        const user = {
            id: nextId.current,
            username,
            email
        };
        // concat 함수
        setUsers(users.concat(user));
        
        // spread 함수
        // setUsers([
        //     //spread 문법
        //     ...users,user
        // ]);

        setInputs({
            username: '',
            email: ''
        });

        nextId.current += 1;
    };

    const onRemove = id => {
    //    user.id 가 파라미터로 일치하지 않는 우너소만 추출해서 새로운 배열을 만듬
    //    = user.id 가 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;

 

이렇게 한 다음 UserList 컴포넌트에서 onToggle 을 받아와서 User 에게 전달해주고, onRemove 를 구현했던것 처럼

onToggle 에 id 를 넣어서 호출해보자

 

import React from "react";

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

// 순서상 UserList 에서 on Toggle 을 받아오고, User 에서 호출
function UserList({users, onRemove, onToggle}) {
    return (
        <div>
            {users.map(user => (
                <User
                    user={user}
                    Key={user.id}
                    onRemove={onRemove}
                    onToggle={onToggle}

                />
            ))}
        </div>
    );
}

export default UserList;

 

다른 계정을 클릭했을 때 초록색이 되는지, 초록색을 클릭 했을 때 검은색이 되는지 확인해보자.