배열에 항목 추가하기

배열에 항목을 집어넣는 컴포넌트를 만들겠습니다.

CreateUser.js

import React from 'react'

function CreateUser({username,email,onChange,onCreate}) {
  return (
    <div>
        <input
            name="username"
            placeholder="input name"
            onChange={onChange}
            value={username}
        />
        <input 
            name="email"
            placeholder="email"
            onChange={onChange}
            value={email}
        />
        <button onClick={onCreate}>등록</button>
    </div>
  )
}

export default CreateUser

App에서 input의 값하고 등록할 함수들을 props로 넘겨받아서 사용하겠습니다.

App.js

function App() {
  const users=[
    {
      id:1,
      username:'hello1',
      email:'fadsf1@naver.com'
    },
    {
      id:2,
      username:'hello2',
      email:'fadsf2@naver.com'
    },
    {
      id:3,
      username:'hello3',
      email:'fadsf3@naver.com'
    },
    {
      id:4,
      username:'hello4',
      email:'fadsf4@naver.com'
    },
  ]


  const nextId=useRef(4);
  const onCreate = ()=>{
    //TODO
    nextId.current +=1;
  }
  return (
    <div>
      <CreateUser />
      <UserList users={users} />
    </div>
  );
}

export default App;

이후 UserList위에 CreateUser를 넣어주겠습니다.

현재 CreateUser 컴포넌트가 필요한 props는
username,email,onChange,onCreate 입니다.

위 props를 app.js에서 구현 하겠습니다.

  const [inputs,setInputs] = useState({
    username:'',
    email:''
  }); //input의 초기 상태

  const {username,email} = inputs;//객체 안의 값을 추출해서 변수 또는 상수로 만듬

  const onChange = (e) =>{
    const {name,value}=e.target; //e.target 객체 안의 name,value를 비구조화할당을 통해 바로 상수 또는 변수로 사용이 가능
    setInputs({
      ...inputs,
      [name]:value
    }); //inputs를 복사한 뒤 name이라는 새로운 객체의 객체값을 value로 넣음
  }

구현한 내용을 CreateUser에게 넘겨주겠습니다.

<CreateUser
        username={username}
        email={email}
        onChange={onChange}
        onCreate={onCreate} 
/>

이후 users 객체에도 useState를 이용해서 컴포넌트 상태로 관리해줍니다.

const [users,setUsers] = useState(
    [
      {
        id:1,
        username:'hello1',
        email:'fadsf1@naver.com'
      },
      {
        id:2,
        username:'hello2',
        email:'fadsf2@naver.com'
      },
      {
        id:3,
        username:'hello3',
        email:'fadsf3@naver.com'
      },
      {
        id:4,
        username:'hello4',
        email:'fadsf4@naver.com'
      },
    ]
  );

이제 배열에 변화를 줍니다.
배열에 변화를 줄때는 객체와 마찬가지로 불변성을 지켜줘야합니다.
이말은 즉슨 splice나 sort등의 배열을 직접적으로 변환시켜주는 함수를 사용하면 안되며,
만약 사용한다해도 기존의 배열을 한번 복사한 후 사용해야합니다.

불변성을 지키면서 배열에 새 항목을 추가하는 방법에는 spread를 사용하면 됩니다.

새 항목을 추가하는 onCreate함수를 작성하겠습니다.

  const nextId=useRef(4);
  const onCreate = ()=>{
    const user={
      id:nextId.current,
      username,
      email
    };
    setUsers([...users,user]);//기존 배열인 users를 복사한 후 새로운 값인 user를 붙이기

    setInputs({
      username:'',
      email:''
    }); // 입력 다 했으면 공백으로 초기화
    nextId.current+=1;
  }

두 번쨰 방법은 concat함수를 사용하는 것입니다.
concat함수는 기존의 배열을 수정하지 않고, 새로운 원소가 추가된 새로운 배열을 만들어줍니다

const nextId=useRef(4);
  const onCreate = ()=>{
    const user={
      id:nextId.current,
      username,
      email
    };
    setUsers(users.concat(user));//새로운 원소인 user를 추가해서 users라는 새로운 배열을 만들어줌

    setInputs({
      username:'',
      email:''
    }); // 입력 다 했으면 공백으로 초기화
    nextId.current+=1;
  }