배열에 항목 추가하기

배열에 새로운 항목을 추가하는 방법을 알아보자!

 

우선 input 두개와 button 하나로 이루어진 CreateUser.js 라는 컴포넌트를 components 디렉터리에 생성

 

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={onCreate}>등록</button>
		</div>
	);
}

export default CreateUser;

 

이번 컴포넌트에는 상태관리를 CreateUser 에서 하지 말고 보무 컴포넌트인 App 에서 하게 하고,

input 의 값 및 이벤트로 등록할 함수들을 props 로 넘겨받아서 사용해보자

 

위의 컴포넌트를 App 에서 UserList 위에 렌더링 해보자

---

App.js

 

import './App.css';
import UsersList from './components/UserList';
import { useRef } from 'react';
import CreateUser from './components/CreateUser';

function App() {

  const users = [
    {
      id: 1,
      username: 'velopert',
      email: 'public.velopert@example.com'
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@example.com'
    },
    {
      id: 3,
      username: 'admin',
      email: 'imAdmin@example.com'
    }
  ];

  // useRef() 를 사용할 때 파라미터를 넣어주면, 이 값이 .current 값의 기본값이 된다.
  // 이 값을 수정 할때에는 .current 값을 수정, 조회 할 때에는 .current 를 조회하면 된다. 
  const nextId = useRef(4);
  const onCreate = () => {
    // 나중에 구현 할 배열에 항목 추가하는 로직
    // ...

    nextId.current += 1;

  };

  return (
    <>
    // 여기 추가해서 렌더링
      <CreateUser />
      <UsersList users={users} />
    </>

  );

}

export default App;

 

결과

 

이제 CreateUser 컴포넌트에게 필요한 props 를 App 에서 준비하자

 

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

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 = [
        {
            id: 1,
            username: 'velopert',
            email: 'public.velopert@gmail.com'
        },
        {
            id: 2,
            username: 'tester',
            email: 'tester@example.com'
        },
        {
            id: 3,
            username: 'liz',
            email: 'liz@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;

 

이렇게 되면 input 의 값이 잘 초기화 된다.

 

이제는 users 도 useState 를 사용하여 컴포넌트의 상태로서 관리하자

 

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

function App() {

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

    const {username, email} = inputs;

    const onChange = e => {
      const { name, value } = e.target;
      setInputs({
          ...inputs,
          [name]: value
      });
    };

    // useState 를 사용하여 컴포넌트의 상태로 관리
    const [users, setUsers] = useState([
        {
            id: 1,
            username: 'velopert',
            email: 'public.velopert@gmail.com'
        },
        {
            id: 2,
            username: 'tester',
            email: 'tester@example.com'
        },
        {
            id: 3,
            username: 'liz',
            email: 'liz@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, slice, sort 등의 함수를 사용하면 안된다.

만약에 사용해야 한다면 기존의 배열을 한번 복사한 후 사용

 

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

 

첫번째 spread 연산자 사용

spread 함수는 아래 링크로.

https://210one2.tistory.com/448

App.js

 

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

function App() {

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

    const {username, email} = inputs;

    const onChange = e => {
      const { name, value } = e.target;
      setInputs({
          ...inputs,
          [name]: value
      });
    };

    // useState 를 사용하여 컴포넌트의 상태로 관리
    const [users, setUsers] = useState([
        {
            id: 1,
            username: 'velopert',
            email: 'public.velopert@gmail.com'
        },
        {
            id: 2,
            username: 'tester',
            email: 'tester@example.com'
        },
        {
            id: 3,
            username: 'liz',
            email: 'liz@example.com'
        }
    ]);

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

        const user = {
            id: nextId.current,
            username,
            email
        };
        setUsers([
            //spread 문법
            ...users,user
        ]);

        setInputs({
            username: '',
            email: ''
        });
		// 증가
        nextId.current += 1;
    };
    return (
        <>
            <CreateUser
                username={username}
                email={email}
                onChange={onChange}
                onCreate={onCreate}
            />
            <UserList users={users}/>
        </>
    );
}

export default App;

결과

 

추가가 됐다 ㄷㄷ

 

두번째 방법

concat 함수를 사용

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

 

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

function App() {

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

    const {username, email} = inputs;

    const onChange = e => {
      const { name, value } = e.target;
      setInputs({
          ...inputs,
          [name]: value
      });
    };

    // useState 를 사용하여 컴포넌트의 상태로 관리
    const [users, setUsers] = useState([
        {
            id: 1,
            username: 'velopert',
            email: 'public.velopert@gmail.com'
        },
        {
            id: 2,
            username: 'tester',
            email: 'tester@example.com'
        },
        {
            id: 3,
            username: 'liz',
            email: 'liz@example.com'
        }
    ]);

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

        const user = {
            id: nextId.current,
            username,
            email
        };
        // concat 함수
        setUsers(users.concat(user));
        
        // spread 함수
        // setUsers([
        //     //spread 문법
        //     ...users,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 을 사용하자