# useState 실습2

그럼 이제 input에 입력한 값이 목록에 보이도록, 삽입, 삭제도 가능하도록 해보자!

1] 우선 입력을 하면 화면에 나타나야 하니까 한 배열을 만들자.

//App.js

  const [users, setUsers] = useState([
    { id: 1, email: "hero@naver.com", age: "30" },
    { id: 2, email: "james@naver.com", age: "31" },
    { id: 3, email: "curry@naver.com", age: "32" },
    { id: 4, email: "tom@naver.com", age: "33" },
  ]);

2] props로 users, 삭제 메소드를 넘겨주자.

   <UserList users={users} onRemoveUser={onRemoveUser} />

3] UserList.js라는 파일을 만들자.

//UserList.js
const User=({user,onRemoveUser})=>{
  return(
    <ul>
      <li>
        {user.email}({user.age}) 
        <button onClick=() => {
                onRemoveUser(user.id);
        }>삭제</button></li>
        

User에 user,onRemoveUser를 파라미터로 받아와
화면에 email,age가 뜨도록 한다.

그다음, map함수를 사용해 값을 변환할 수 있게 하자.

이때 key값이 있어야 오류가 안뜨는데, 이때 이 key 값에는 유니크한 값을 넣어줘야한다. 처음엔 ke={index}로 했었는데,배열은 유동적이기에 index보단 id로 쓰는 것이 좋다!

const UserList = ({ users,onRemoveUser }) => {
  return(
    <div>
      {users.map((user)=><User key={user.id} user={user} onRemoveUser={onRemoveUser})}
    </div>
  )
};

4]onRemoveUser 메소드 정의하자

삭제 기능은
filter함수를 사용해 내가 삭제하고자 하는 목록의 id와 기존의 id가 같지 않는 값들로만 이루어져 있으면 된다.

//App.js
const onRemoveUser = (id) => {
    setUsers((users) => users.filter((user) => user.id !== id));
  };

그럼 setUsers에 새로운 값들로 변경되므로 삭제버튼을 누르면 삭제되는 걸 확인 할 수있다!

5] 추가 기능 구현하자
input 태그 옆에 추가버튼을 누르면 목록에 추가되게 할 것이다.

onAddUser() 메소드를 생성.

const onAddUser=()=>{
  const newUser={id:nextId.current,email,age};
    setUsers([...users,newUser]);
    setInputs({
      email:'',
      age:''
    })
  }

id를 특정 숫자로 지정해줄 수 없으니까, nextId라는 변수를 사용해 지정해주자.

이렇게 컴포넌트 안에서 변수를 사용하고 싶을때
useRef라는 Hook 함수를 사용할 수 있다.
이 함수는 특정 DOM을 선택하고 싶을때도 사용한다.

const nextId=useRef(5);

이런식으로 위에 선언하면 된다.
이때도 스프레드(...)연산자를 통해 기존배열에 newUser라는 새로운 값들이 저장된다!

6] 특정 DOM focus 해주기
버튼을 누르고 input값이 초기화 되거나 email 태그가 자동으로 focus되게 하려면?
위에서 말했듯이 useRef 함수를 사용한다!

const nameInputRef=useRef();

const onAddUser=()=>{
   ---생략---
   nameInputRef.current.focus();
   nextId.current+=1;
}
 

그럼 이렇게 내가 입력한대로 값이 추가가 된다!!
useState 개념을 살펴보고 응용하면서 생각보다 재밌으면서도 은근 복잡했다.. props로 부모 컴포넌트에서 하위 컴포넌트로 속성명 지정해서 하는게 은근 헷갈려서 계속 생각해야했다..
하지만 연습 만이 답인 듯 하다.