[React 강의 노트(2)] CRUD

react강의 노트 | Byte Degree [3주차]

 

배열 렌더링하기 Read

 

import React from "react";

function User({ user }) { //파일안에 새로운 component 만들기
  return (
    <div>
      <b>{user.username}</b> <span>{user.email}</span>
    </div>
  );
}

function UserList() {
  const users = [
    {
      id: 1,
      username: "heeyeon",
      email: "junghy@gmail.com",
    },
    {
      id: 2,
      username: "ggtt",
      email: "ggtt@gmail.com",
    },
    {
      id: 3,
      username: "ssdd",
      email: "ssdd@gmail.com",
    },
  ];
  
  /*return (
    <div>
      <User user={users[0]} />
      <User user={users[1]} />
      <User user={users[2]} />
    </div>
  );*/
  
    return (
    <div>
      {users.map((user) => (
        <User user={user} key={user.id} />
      ))}
    </div>
  );
}

export default UserList;

 

- key로 사용할 id 값이 없다면 map의 콜백함수의 index사용하기 (웬만하면 안쓰는게 좋음)

 

useRef로 component 안의 변수 만들기

- 주로 useRef를 사용하는 경우

setTimeout, setInterval의 주어지는 id를 기억해야할 때, 외부라이브러리를 사용하여 생성된 인스턴스, scroll위치 등

-> useRef로 관리하는 값은, 바뀌어도 component가 리렌더링 되지 않는다는 점이 포인트!

- 특정 DOM을 선택하고 싶을 때 쓸 수 도 있지만, 어떠한 변수를 계속 기억하고 싶을 때도 사용한다

 

 

배열에 항목 추가하기 Create

 

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

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

  const { username, email } = inputs; //비구조와 할당으로 추출

  const onChange = (e) => {
    const { name, value } = e.target; //비구조와 할당으로 추출
    setInputs({
      ...inputs, //spread 문법으로 inputs을 가져오고
      [name]: value, //name을 value로 바꾸겠다. -> name이 username, emil을 인식
    });
  };

  const [users, setUsers] = useState([
    //변수로 만들어서 배열에 동적으로 추가가능하게 만듦
    {
      id: 1,
      username: "heeyeon",
      email: "junghy@gmail.com",
    },
    {
      id: 2,
      username: "ggtt",
      email: "ggtt@gmail.com",
    },
    {
      id: 3,
      username: "ssdd",
      email: "ssdd@gmail.com",
    },
  ]);

  const nextId = useRef(4);

  const onCreate = () => {
    const user = {
      //onCreate 발생시 새로운 user 객체 만들기
      id: nextId.current,
      username, //어차피 inputs에서 가져오는 것이 때문에 ...inputs을 사용해도 무관
      email,
    };
    setUsers(users.concat(user)); //기존의 배열을 복사해서 새로운 배열을 만들고 새로운 user 추가되기
    setInputs({
      //onCreate시 input값 공백으로
      username: "",
      email: "",
    });
    nextId.current += 1; //onCreate시 user의 id +1씩
  };

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

export default App;

 

- 배열을 본격적으로 추가할 경우 PUSH, SORT, SPLICE 사용하면 안된다.

(기존 배열 건들지 말기)

 

1. spread 연산자 사용하기

기존배열 복사해서 새로운 배열을 만들고 새 배열 붙이기

 

setUsers([...users, user]);

 

2. concat 함수 사용하기

여러개의 배열을 하나의 배열로 합치기

 

setUsers(users.concat(user));

 

 

배열에 항목 제거하기 Delete

 

 

//user.js
function User({ user, onRemove }) {
  //user.id or user.username 등 계속 user을 사용하는 것이 싫다면 추출하기
  const { username, email, id } = user;
  return (
    <div>
      <b>{username}</b> <span>{email}</span>
      <button onClick={() => onRemove(id)}>remove</button>
    </div>
  );
}

 

- onClick 함수의 콜백 함수에 인자를 넘길 시, 바로 호출하지말고 선언해주는 방식 사용하기

 

 

  const onRemove = (id) => {
    setUsers(users.filter((user) => user.id !== id));
  };

 

- filter를 사용해서 불변성 지키기

 

 

배열에 항목 수정하기 

 

1. style 적용

 

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

 

2. 클릭 시 user의 actiive가 true로 바뀌는 함수 

 

  //toggle
  const onToggle = (id) => {
    setUsers(
      users.map(
        (user) => (user.id === id ? { ...user, active: !user.active } : user)
        //클릭 한 기존 객체 user를 가져와서 user.active의 상태를 반대로 변화 (true, false)
        //클릭 하지 않은 user은 그대로
      )
    );
  };

 

+) 띄어쓰기