리액트 리스트 추가 및 생성

CRUD를 위한 개발에서 Create,Read,Delete에 대한 작업을 간단하게 작성했다.
js 확장자에서 작성하던 코드랑 사뭇 달라서 많이 연습해야할 것 같다. 지금 뭔가 머릿 속에서 정리가 안 된 탓인지 코드 보기가 힘들다.

import { useState } from "react";
import "./App.css";

function App() {
  const initialState = [
    { id: 1, name: "John", age: 20 },
    { id: 2, name: "Doe", age: 21 },
  ];
  const [users, setUsers] = useState(initialState);

  // TODO: 이름과 나이를 각각 상태로 정의하세요. 초기값은 빈문자열("")입니다.
  const [name, setName] = useState("");
  const [age, setAge] = useState("");
  const addUser = (e) => {
    e.preventDefault();
    const newUser = { id: Date.now(), name, age };
    if (name === "" || age === 0) {
      alert("Please enter the name and age");
      return;
    }
    // TODO: 이름과 나이가 모두 입력되지 않았을 때는 alert 처리하고 함수를 종료하세요. 논리합연산자 (||) 를 이용하세요.
    setUsers([...users, newUser]);
    setName("");
    setAge(0);
    console.log(users);
    console.log(newUser);

    // TODO: 사용자 리스트 상태를 업데이트 하세요. spread operator 를 사용하고, 추가되는 id는 현재 시간을 밀리초 단위로 반환하는 Date.now() 를 사용하세요.
  };

  const removeUser = (id) => {
    // TODO: filter 메소드를 사용해서 사용자 삭제 로직을 구현해 보세요.
    setUsers(users.filter((user) => user.id !== id));
  };

  return (
    <>
      <h1>사용자 리스트</h1>
      <form onSubmit={addUser}>
        {/* TODO: input 태그에 value, onChange 속성을 추가해서 이름과 나이의 상태와 상태변경 로직을 연결하세요 */}
        <input
          type="text"
          placeholder="이름"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
        <input
          type="number"
          placeholder="나이"
          value={age}
          onChange={(e) => setAge(Number(e.target.value))}
        />
        <button type="submit">사용자 추가</button>
      </form>
      <ul>
        {/* TODO: map 메소드를 이용해서 user 리스트를 렌더링하세요.  */}
        {/* 이름: John, 나이: 20 [삭제] 버튼이 하나의 행에 나올 수 있도록 해보세요. (hint: flex) */}
        {users.map((user) => (
          <li key={user.id} className="userContent">
            <p>이름:{user.name}</p>
            <p>나이:{user.age}</p>
            <button onClick={() => removeUser(user.id)}>DELETE</button>
          </li>
        ))}
      </ul>
    </>
  );
}

export default App;

전체 코드와 문제에서 제시하고 있는 바는 주석처리로 위와 같이 나타나있다.

일단 목표는 다음과 같이 정리할 수 있다.

• intialState는 중첩 구조의 배열이며 useState를 통해 users 변수의 초기값으로 할당되었다.
• 이름과 나이에 대한 상태를 다루는 state를 만들어서 현재 상태를 추적한다. -> 값 변화에 따라서 화면에 리렌더링 되도록
• 태그에 value, onClick, onChange 같은 변수 할당과 이벤트를 등록하고 처리한다.

 

일단 state를 생성해서 상태 변화를 감지할 useState를 선언한다.

  const initialState = [
    { id: 1, name: "John", age: 20 },
    { id: 2, name: "Doe", age: 21 },
  ];
  const [users, setUsers] = useState(initialState);
  const [name, setName] = useState("");
  const [age, setAge] = useState("");

값의 변화를 감지할 대상들을 선언하였다. useState는 [변수,콜백함수]와 같은 구조로 생각하고 변수는 변수대로 쓰고 함수는 함수대로 쓰자. 변수의 값을 다루기 위해서는 선언한 콜백함수에 해당하는 함수를 통해 상태를 관리한다.

 

현재 코드에서는 addUser와 removeUser의 함수를 등록하고 해당 함수에서 새로운 사용자를 추가하고 삭제하는 이벤트가 발생하도록 한다.

 

  const addUser = (e) => {
    e.preventDefault();
    const newUser = { id: Date.now(), name, age };
    if (name === "" || age === 0) {
      alert("Please enter the name and age");
      return;
    }
    setUsers([...users, newUser]);
    setName("");
    setAge(0);
  };

이벤트를 발생시키는 함수의 선언은 자바스크립트에서 다루는 것과 똑같다. 이벤트 리스너로 등록할 함수의 선언을 하면 되지만 변수의 값을 변경시키기 위해 useState에서 선언한 set 함수를 사용하면 된다. 위의 사용자 추가 함수에서는 newUser라는 새로운 사용자 생성 객체를 선언하고 id,name,age의 값을 가지도록 선언하였다. id는 Date.now()를 통해 시간을 통한 임의의 값을 가지도록 했다. 입력한 값의 검증을 통해 alert가 뜨도록하였다.
setUsers 함수를 통해 스프레드 연산자를 통한 새로운 배열을 생성하도록 하였다. 입력한 이후 setName, setAge의 필드를 초기화 시키도록하였다.

 

삭제하는 코드의 경우에는 다음과 같이 작성하였다.

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

id는 Date.now()의 값을 통해 현재 시간의 초를 생성하도록 하였다. 따라서 해당 시간에 생성한 목록은 1개가 유일하므로 생성한 사용자의 id를 추적하여 삭제하도록했다.

리렌더링

state의 사용은 값의 상태가 변화하면 리렌더링을 통해 화면에 표시하기 위해서이다. 따라서 state를 통해 값을 추적하고 변화한 상태를 표시하기 위해 다음과 같은 코드를 작성하였다.

    <>
      <h1>사용자 리스트</h1>
      <form onSubmit={addUser}>
        <input
          type="text"
          placeholder="이름"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
        <input
          type="number"
          placeholder="나이"
          value={age}
          onChange={(e) => setAge(Number(e.target.value))}
        />
        <button type="submit">사용자 추가</button>
      </form>
      <ul>
        {users.map((user) => (
          <li key={user.id} className="userContent">
            <p>이름:{user.name}</p>
            <p>나이:{user.age}</p>
            <button onClick={() => removeUser(user.id)}>DELETE</button>
          </li>
        ))}
      </ul>
    </>

 

 

입력을 위해 생성한 input 태그에는 사용자가 입력한 값을 추적해야하므로 useState에서 정의한 name, age를 value 속성으로서 input 태그에 할당했다.
onChange는 입력값을 감지하여 상태를 업데이트하고 key에는 id를 할당하여 고유 요소로서 다뤄지도록 했다.

---

1Return Early Pattern

강의를 들으면서 알게된 패턴이다.
함수의 실행 초기에 특정 조건을 검사하고, 조건 불충족 시 즉 시 종료한다. 실행되는 코드의 조건이 만족되는 경우에만 실행하도록 설계하는 패턴이며 중첩된 코드를 방지한다.
앞서 작성한 코드에서 이름과 나이를 입력하지 않으면 alert가 뜨게하고 return만 쓴 코드가 그 예시라고 볼 수 있다.
만약 작성하지 않는다면 다음과 같이해야할 수 있다.

const addUser = (e) => {
  e.preventDefault();

  // 조건이 통과되지 않으면 모든 코드를 중첩시켜야 함
  if (name !== "" && age !== 0) {
    const newUser = { id: Date.now(), name, age };
    setUsers([...users, newUser]);
    setName("");
    setAge(0);
  } else {
    alert("Please enter the name and age");
  }
};

---