[TIL #19] 스탠다드 과제1 해설

git clone

예시코드를 가지고 과제를 하는 거기 때문에 clone 해야지하고 했는데, 깃허브 브랜치 연결이 당연히 예시코드가 있는 튜터님의 브랜치.. 큰일날뻔

fork 하는 방법도 있지만 제일 쉬운 방법이 있다.

𝟏. 개인 레포지토리를 만들기

과제를 할 내 개인 레포지토리를 만든다.
그리고 git clone을 사용하여 내 로컬 = 바탕화면으로 clone!

💡 폴더위치는 상관없음

𝟐. 튜터님의 레포지토리 CLONE

..cd 명령어로 바탕화면으로 돌아와서 예시코드가 있는 깃허브 레포지토리를 git clone 한다.

생긴폴더 2개

🙌 이렇게 하면 폴더는 2개가 생길것.

그럼 두개의 폴더를 열어 2번에서 clone한걸 1번으로 ctrl+c ctrl+v 해주고 git push 해주면 끝!

---

과제 해설

 // TODO: 이름과 나이를 각각 상태로 정의하세요. 초기값은 빈문자열("")입니다.
  const [name, setName] = useState("");
  const [age, setAge] = useState("");

useState를 사용해서 name 과 age 두가지 상태를 정의 했다.

추가

 const addUser = (e) => {
    e.preventDefault();
    // TODO: 이름과 나이가 모두 입력되지 않았을 때는 alert 처리하고 함수를 종료하세요. 논리합연산자 (||) 를 이용하세요.
    if (!name || !age) {
      alert("이름과 나이를 입력해주세요");
      return;
    }
    // TODO: 사용자 리스트 상태를 업데이트 하세요. spread operator 를 사용하고, 추가되는 id는 현재 시간을 밀리초 단위로 반환하는 Date.now() 를 사용하세요.
    setUsers([...users, { id: Date.now(), name: name, age: age }]
    )
  };

addUser: 새 사용자 추가
입력된 이름과 나이가 없으면 경고창 표시하고 함수를 종료하려고 return
setUsers 사용하여 새 사용자를 현재 사용자 목록에 추가

삭제

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

filter 사용해서 주어진 ID를 가진 사용자를 제외하고 나머지 사용자들로 새로운 배열을 만들었다.

상태변경

 {/* 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(e.target.value)} />

input의 value 속성은 각각 name age 상태에 바인딩 되어있다. 그래서 input에 사용자가 입력한 값이 표시된다.
onChange 이벤트 핸들러를 써서 사용자가 입력한 값을 상태에 업데이트

랜더링

/* TODO: map 메소드를 이용해서 user 리스트를 렌더링하세요.  */
  users.map((user) => (
    < form key={user.id} style={{ display: "flex" }}>
    <div> 이름: {user.name}, 나이: {user.age} </div>

map을 사용하여 users 배열을 순화하면서 각각의 사용자 표시.
이름과 나이를 보여주면서 삭제 버튼이 있는 사용자 항목 랜더링했다!

의문점

코드를 쓰면서, user users 를 썼는데, user 선언을 안했는데? 할 수 있다.

users

• 전체 사용자 목록을 담고 있는 상태 변수
• useState 를 사용하여 정의되며, 초기값으로 initialState를 가짐
• 여러 사용자 객체가 포함
• 예시: [ { id: 1, name: "John", age: 20 }, { id: 2, name: "Doe", age: 21 } ]

user

• users 배열을 순회할 때 각 요소를 나타내는 변수
• map 함수 내부에서 사용되며, 각 사용자 객체를 나타냄
• map 함수의 콜백 함수 안에서만 사용
• 예시: { id: 1, name: "John", age: 20 }