리액트로 간단한 CRUD완성

이름, 이메일을 입력하는 간단한 CRUD를 만들어보았다.

지난주에 만들어본것을 연습을 위해 다시 한번 만들었다. css는 크게 건드리지 않고 기능위주로 다시 만들기 위해 노력했다.

 

기능은 다음과 같다.

1️⃣ Create 등록하기
2️⃣ Read 화면에 띄우기
3️⃣ Update 수정하기
4️⃣ Delete 삭제하기

 

1️⃣ Create 등록하기

// CreateUser3.js

import React from "react";
import { v4 as uuidv4 } from "uuid";

export default function CreateUser3({ username, email, onChange, onCreate }) {
  return (
    <div>
      <input
        name="username"
        placeholder="이름을 입력하세요"
        value={username}
        onChange={onChange}
      />
      <input
        name="email"
        placeholder="이름을 입력하세요"
        value={email}
        onChange={onChange}
      />
      <button onClick={() => onCreate(uuidv4())}> 등록하기</button>
    </div>
  );
}


// App3.js

 //input의 상태관리 (useState훅 이용)
  const [inputs, setInputs] = useState({
    username: "",
    email: "",
  });

  //구조분해할당
  const { username, email } = inputs;

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

  const onCreate = (id) => {
    const user = {
      id,
      username,
      email,
    };
    setUsers([...users, user]);
    setInputs({ username: "", email: "" });
  };

 

✅ input의 상태관리를 useState hook이용

✅ 여러개의 input의 상태를 한꺼번에 관리하기 위해 name을 이용

먼저 Create만을 위한 컴포넌트를 따로 만들어서 거기에 input을 2개 만들었다.

input의 상태관리를 효율적으로 하기 위해서 name의 값을 이용해서 e.target.value를 변경하도록 했다.

✅ 고유한 key부여를 위해 uuid사용

id값에 uuid로 고유한 값 만듦 → 그 id를 key값으로 넣어줌

각각 다른id값을 이용, id비교를 통해 → 1. 삭제하기
                                                           2. 수정하기

 

uuid()를 사용해서 고유한 key값을 만들어주는 것을 만들면서 uuid()의 사용법을 익혔다.

onCreate()의 인자로 넣어서 만들어야 에러가 없이, 고유한 키를 가진 새로운 값을 만들어낼 수 있다.

 

 

2️⃣ Read 화면에 띄우기

// UserList3.js

const User = ({ props, onToggle, onRemove }) => {
  return ( 
    <div className="User-container">
      <b
        style={{
          cursor: "pointer",
          color: props.active ? "blue" : "black",
        }}
        onClick={() => onToggle(props.id)}
      >
        {props.username}
      </b>
      <span>{props.email}</span>
      <button onClick={() => onRemove(props.id)}>삭제하기</button>
    </div>
  );
};

export default function UserList3({ users, onToggle, onRemove }) {
  return (
    <div>
      {users.map((item) => (
        <User
          props={item}
          key={item.id}
          onToggle={onToggle}
          onRemove={onRemove}
        />
      ))}
    </div>
  );
  
  
//App3.js

const [users, setUsers] = useState([
    {
      id: "1",
      username: "열공",
      email: "100@hi.com",
      active: true,
    },
    {
      id: "2",
      username: "홧팅",
      email: "ft@hi.com",
      active: true,
    },
    {
      id: "3",
      username: "펭수",
      email: "GP@hi.com",
      active: false,
    },
  ]);

✅ map()함수를 통해 각각의 값 띄우기

App3.js에 있는 users를 UserList3.js에 prop으로 받아온다.

받아온 users를 map함수를 통해 돌면서 화면에 띄어준다.

 

 

3️⃣ Update 수정하기

//UserList3.js

      <b
        style={{
          cursor: "pointer",
          color: props.active ? "blue" : "black",
        }}
        onClick={() => onToggle(props.id)}
      >
        {props.username}
      </b>



//App3.js

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

✅ id 비교를 통한 글자 색 바꾸기

users객체안에 active프로퍼티의 값을 이용해서 onToggle함수의 스타일을 변화시킨다.

id값을 비교한 뒤, id가 같으면 active의 상태를 반대로 만드는 방식을 이용한다.

 

 

4️⃣ Delete 삭제하기

// UserList3.js

const User = ({ props, onToggle, onRemove }) => {
  return ( 
    <div className="User-container">
      <b
        style={{
          cursor: "pointer",
          color: props.active ? "blue" : "black",
        }}
        onClick={() => onToggle(props.id)}
      >
        {props.username}
      </b>
      <span>{props.email}</span>
      <button onClick={() => onRemove(props.id)}>삭제하기</button>
    </div>
  );
};

export default function UserList3({ users, onToggle, onRemove }) {
  return (
    <div>
      {users.map((item) => (
        <User
          props={item}
          key={item.id}
          onToggle={onToggle}
          onRemove={onRemove}
        />
      ))}
    </div>
  );
  
  
//App3.js
 const onRemove = (id) => {
    setUsers(users.filter((item) => item.id !== id));
  };

✅ filter함수를 통해 삭제구현

filter를 통해 users에 있는 값을 비교해서, id값이 일치하는 것만 삭제해준다.