React/Velopert's React

[React] Study #12 | 배열에 항목 추가하기

yevdev 2021. 10. 7. 18:44

제목과 같다시피 배열에 새로운 항목을 추가하는 방법을 알아보겠다!

 

 

일단, 배열에 항목을 추가할 준비를 시작해보자

 

CreateUser.js

  • input 두개와 button 하나로 이루어진 컴포넌트
  • input의 값 및 이벤트로 등록할 함수들을 props로 넘겨받아서 사용
import React from 'react';

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

    )
}

export default CreateUser;

App.js : 상태관리

import React,{useRef} from 'react'; 
import UserList from './UserList';
import CreateUser from './CreateUser';

function App() {
  const users = [
    {id: 1, name: 'John', email: 'john@example.com'},
    {id: 2, name: 'Car', email: 'car@example.com'},
    {id: 3, name: 'lee', email: 'lee@example.com'},
];

const nextId = useRef(4);
const onCreate = () => {
    // 나중에 구현 할 배열에 항목 추가하는 로직
    // ...

    nextId.current += 1;
};
  return (   
    <>
      <CreateUser />
      <UserList users={users}/>
    </>
  );
}

export default App;

UserList.js : 유저들을 리스트를 나열해줌

import React from 'react'

function User({user}) {
    return(
        <div>
            <span>{user.username}</span>
            <span>{user.email}</span>
        </div>
    )
}

function UserList({users}) {

    return (
        <div>
            {/* 배열을 렌더링할때, key라는 props를 설정해주기!! */}
            {users.map(user => (
                <User user={user} key={user.id}/>
            ))}
        </div>
    )
}

export default UserList

 

 

이제 App.js에서 CreateUser 컴포넌트에게 필요한 props를 준비해보겠다!

App.js

import React,{useRef, useState} from 'react'; 
import UserList from './UserList';
import CreateUser from './CreateUser';

function App() {

  //새롭게 입력받을 값 상태 관리
  const [inputs, setInputs] = useState({
    username: '', email: ''
  })

  //inputs에서 username, email을 빼내오기
  const {username, email} = inputs;

  const onChange = e => {
    // 바뀌는 부분의 name, value를 가져와서 setting
    const {name, value} = e.target;

    setInputs({
      ...inputs,
      [name]: value
    })
  }

  const users = [
    {id: 1, username: 'John', email: 'john@example.com'},
    {id: 2, username: 'Car', email: 'car@example.com'},
    {id: 3, username: 'lee', email: 'lee@example.com'},
];

const nextId = useRef(4);
const onCreate = () => {
    // 나중에 구현 할 배열에 항목 추가하는 로직
    // ...

    // 등록 버튼을 눌렀을 때, input 값들의 초기화!
    setInputs({
      username: '',
      email: ''
    })
    nextId.current += 1;
};
// App에서 준비한 props를 CreateUser 컴포넌트에게 넘겨주기
  return (   
    <>
      <CreateUser 
      username={username}
      email={email}
      onChange={onChange}
      onCreate={onCreate}
      />
      <UserList users={users}/>
    </>
  );
}

export default App;

-> 이렇게 작성하면 input을 작성하고 등록 버튼을 눌렀을 때 input의 내용이 잘 초기화 됨을 확인할 수 있다.

 

 

 

그 다음, users도 useState를 사용하여 컴포넌트의 상태로서 관리해보자

App.js

import React,{useRef, useState} from 'react'; 
import UserList from './UserList';
import CreateUser from './CreateUser';

function App() {

  const [inputs, setInputs] = useState({
    username: '', email: ''
  })


  const {username, email} = inputs;

  const onChange = e => {

    const {name, value} = e.target;

    setInputs({
      ...inputs,
      [name]: value
    })
  }

  // users 배열을 useState로 상태관리 해주기
  const [users, setUsers] = useState(
    [
      {id: 1, username: 'John', email: 'john@example.com'},
      {id: 2, username: 'Car', email: 'car@example.com'},
      {id: 3, username: 'lee', email: 'lee@example.com'},
    ]
)
    

const nextId = useRef(4);
const onCreate = () => {
    setInputs({
      username: '',
      email: ''
    })
    nextId.current += 1;
};

  return (   
    <>
      <CreateUser 
      username={username}
      email={email}
      onChange={onChange}
      onCreate={onCreate}
      />
      <UserList users={users}/>
    </>
  );
}

export default App;

이제 배열에 항목을 추가할 준비가 마무리 되었다!

 

 

배열에 변화를 줘보자 !

🚫이때 객체와 마찬가지로 불변성을 지켜주어야한다.

따라서, 배열의 push, splice, sort 함수를 사용하면 안되고, 꼭 사용해야 한다면 기존의 배열을 한번 복사하고 사용해야한다.

 

불변성을 지키면서 배열에 새항목을 추가하는 방법은 두가지!

 

1️⃣ spread 연산자 사용

import React,{useRef, useState} from 'react'; 
import UserList from './UserList';
import CreateUser from './CreateUser';

function App() {

  const [inputs, setInputs] = useState({
    username: '', email: ''
  })


  const {username, email} = inputs;

  const onChange = e => {

    const {name, value} = e.target;

    setInputs({
      ...inputs,
      [name]: value
    })
  }


  const [users, setUsers] = useState(
    [
      {id: 1, username: 'John', email: 'john@example.com'},
      {id: 2, username: 'Car', email: 'car@example.com'},
      {id: 3, username: 'lee', email: 'lee@example.com'},
    ]
)
    

const nextId = useRef(4);
const onCreate = () => {

    // 새로운 항목을 추가하기 위한 객체
    const user = {
      id: nextId.current,
      username,
      email
    };

    // spread 연산자를 통해 불변성을 유지하면서 배열에 항목 추가!
    setUsers([...users, user]);

    setInputs({
      username: '',
      email: ''
    })
    nextId.current += 1;
};

  return (   
    <>
      <CreateUser 
      username={username}
      email={email}
      onChange={onChange}
      onCreate={onCreate}
      />
      <UserList users={users}/>
    </>
  );
}

export default App;

setUsers([...users, user]) 에서 ... spread 연산자를 사용해 배열에 불변성을 지켜주었다!

 

2️⃣ concat 함수

  • concat함수는 기존의 배열을 수정하지 않고, 새로운 원소가 추가된 새로운 배열을 만들어 준다!

App.js

import React,{useRef, useState} from 'react'; 
import UserList from './UserList';
import CreateUser from './CreateUser';

function App() {

  const [inputs, setInputs] = useState({
    username: '', email: ''
  })


  const {username, email} = inputs;

  const onChange = e => {

    const {name, value} = e.target;

    setInputs({
      ...inputs,
      [name]: value
    })
  }


  const [users, setUsers] = useState(
    [
      {id: 1, username: 'John', email: 'john@example.com'},
      {id: 2, username: 'Car', email: 'car@example.com'},
      {id: 3, username: 'lee', email: 'lee@example.com'},
    ]
)
    

const nextId = useRef(4);
const onCreate = () => {

    // 새로운 항목을 추가하기 위한 객체
    const user = {
      id: nextId.current,
      username,
      email
    };

    // concat 함수로 새로운 배열을 만들어내기!
    setUsers(users.concat(user));

    setInputs({
      username: '',
      email: ''
    })
    nextId.current += 1;
};

  return (   
    <>
      <CreateUser 
      username={username}
      email={email}
      onChange={onChange}
      onCreate={onCreate}
      />
      <UserList users={users}/>
    </>
  );
}

export default App;

출력 화면!

 

이렇게 배열에 새로운 항목을 추가해줄때는 spread 연산자를 이용하거나 concat함수를 통해 불변성을 지켜주면 된다!

 

 

Reference

https://react.vlpt.us/basic/13-array-insert.html

'React > Velopert's React' 카테고리의 다른 글

[React] Study #14 | 배열 항목 수정하기  (0) 2021.10.07
[React] Study #13 | 배열에 항목 제거하기  (0) 2021.10.07
[React] Study #11 | useRef 로 컴포넌트 안의 변수만들기  (0) 2021.10.04
[React] Study #10 | 배열 렌더링, key의 중요성  (0) 2021.10.02
[React] Study #9 | useRef 로 특정 DOM 선택하기  (0) 2021.10.02

'React/Velopert's React'의 다른글

  • 현재글[React] Study #12 | 배열에 항목 추가하기

관련글

티스토리툴바