배열에 항목 수정하기

• 수정할 때 불변성을 지켜준다. 불변성을 지킨다는 건 state값을 유지 한다고 생각하면 된다.

• 수정할때에도 map과 if(삼항연산자)문을 비교하여 setState를 활용한다.

• style 속성에도 js를 사용할 수 있다.

• Boolean 값으로 on/off 할 때 onToggle이란 함수명을 자주 사용하자

App.js

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

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: 'jini',
        email: 'genie9105@gmail.com',
        active : true,
    },
    {
        id: 2,
        username: 'tester',
        email: 'abc@naver.com',
        active : false,
    },
    {
        id: 3,
        username: 'nana',
        email: 'dkdk@naver.com',
        active : false,
    }
  ]);

  const nextId = useRef(4); //useref의 초기값은 4

  const onCreate = () => {
    const user = {
      id: nextId.current,
      username,
      email,
    }

    //배열 항목 추가하기
    // setUsers([...users, user]); //1번째 방법
    setUsers(users.concat(user)); //2번째 방법

    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;

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

CreateList.js

import React from "react";

//onChange는 이 텍스트(input)값이 바뀌게 될때, onCreate는 버튼을 눌렀을 때 새로운 항목을 등록해주는 함수
function CreateUser({ username, email, onChange, onCreate }) {
    return (
        <div>
            <input
                name="username" 
                placeholder="계정명" 
                onChange={onChange} 
                value={username}
            />
            <input
                name="email" 
                placeholder="이메일" 
                onChange={onChange} 
                value={email}
            />
            <button onClick={onCreate}>등록</button>
        </div>
    );
}

export default CreateUser;

---

이 글은 패스트캠퍼스 '프론트엔드(React)올인원패키지Online'을 수강하며 정리한 노트입니다.
https://fastcampus.co.kr/search?keyword=%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C