[2024.05.13] TIL 19일차

[ 본캠프 19일차 기록 ]

🖥️ 오늘 공부한 내용 🖥️

새로운 주차 시작

1. 리액트 실시간 수업 후 과제 수행

• 오늘은 단계별 분반 후 첫 실시간 수업을했다.
  초반에는 리액트 환경에서 전 주차때 공부한 js 내용을 복습했고,
  후반부에는 react 세팅과 내일까지 제출할 과제 간단히 설명해주시고 수업을 마쳤다.

2. 수업 과제 수행
   

• 수업 과제는 이름과 나이를 적으면 정보카드가 생성되는 형식의 사용자 리스트를 만드는 것이였다

• 요구사항은 아래와 같다

1. 이름과 나이를 각각 상태로 정의하세요. 초기값은 빈문자열("")입니다.
2. 이름과 나이가 모두 입력되지 않았을 때는 alert 처리하고 함수를 종료하세요. 논리합연산자 (||) 를 이용하세요.
3. 사용자 리스트 상태를 업데이트 하세요. spread operator 를 사용하고, 추가되는 id는 현재 시간을 밀리초 단위로 반환하는 Date.now() 를 사용하세요.
4. filter 메소드를 사용해서 사용자 삭제 로직을 구현해 보세요.
5. input 태그에 value, onChange 속성을 추가해서 이름과 나이의 상태와 상태변경 로직을 연결하세요
6. map 메소드를 이용해서 user 리스트를 렌더링하세요.
7. 이름: John, 나이: 20 [삭제] 버튼이 하나의 행에 나올 수 있도록 해보세요. (hint: flex)

• 각각의 요구사항은 다음과 같이 해결했다

[ 1번 요구사항 ]

  const [name, setName] = useState("");
  const [age, setAge] = useState("");

[ 2번 요구사항 ]

    if (!name || !age) {
      alert("이름과 나이 모두 입력해주세요");
      return;
    } 

[ 3번 요구사항 ]

    const id = Date.now();

    const userInfo = {
      id: id,
      name: name,
      age: age
    };

    const userUpdate = [...users, userInfo];

    setUsers(userUpdate);

    setName("");
    setAge("");

[ 4번 요구사항 ]

    const userUpdate = users.filter(user => user.id !== id);
    setUsers(userUpdate);

[ 5번 요구사항 ]

          <input 
            type="text" 
            placeholder="이름" 
            className="nameInput"
            value={name}
            onChange={(e) => {setName(e.target.value)}}
          />
          <input 
            type="number" 
            placeholder="나이" 
            className="ageInput"
            value={age}
            onChange={(e) => {setAge(e.target.value)}}
          />

[ 6번, 7번 요구사항 ]

        {users.map(user => (
          <div className="userMap">
            <li key={user.id} className="userData">
              <pre>이름: {user.name}   |   나이: {user.age}</pre>
            </li>
            {/* 이름: John, 나이: 20 [삭제] 버튼이 하나의 행에 나올 수 있도록 해보세요. (hint: flex) */}
            <button onClick={() => removeUser(user.id)} className="removeBtn">삭제</button>
          </div>
        ))}