React입문 반복되는 컴포넌트 처리하기

객체가 담긴 배열을 다양한 API를 사용해 데이터를 추가하고 삭제해보았다.
페이지는 다음과 같고 추가를 누르면 데이터가 추가되고, 데이터 안의 x를 누르면 데이터가 삭제되는 페이지다.

전체적인 코드는 다음과 같다.

1. 새로운 데이터 추가 (25번째 줄)

// 추가 버튼 클릭
  const clickAddButtonHandler = () => {
    // 1. 새로운 형태의 newUser을 만든다
    // newUser : { id: 1, age: 36, name: "손아섭" },
    // 2. newUser을 배열에 더한다

    const newUser = {
      id: users.length + 1,
      age,
      name: name,
    };

    setUsers([...users, newUser]);
  };

=> 새로운 데이터를 만들고 그것을 원래의 Users에 추가하는 방식이다.

2. 데이터삭제 (40번째 줄)

// 삭제 버튼 클릭(x)
  const clickRemoveButtonHandler = (id) => {
    // const newUsers = users.filter((user) => user.id !== id);
    const newUsers = users.filter(function (user) {
      return user.id !== id;
    });
    setUsers(newUsers);
  };

=> filter를 사용해서 콜백함수를 이용해 아이디가 같은 값은 필터링하고 아이디가 다른값은 가져와 보여주는 방식이다.

3. 컴포넌트 분리하기
   코드를 한꺼번에 구현하면 보기에도 불편하고 협업할 때도 힘들어지니 Button과 User부분은 따로 분리해주었다.
   
   => 마지막에 위와 같이 export default 컴포넌트명을 넣어주고 app()가 있는 전체코드파일 상단에 import를 해주면 된다!