이롭게 현명하게

[React] 리액트 배열에 항목 추가하기 본문

웹 개발/React

[React] 리액트 배열에 항목 추가하기

dev_y.h 2023. 12. 29. 18:33
728x90
반응형

※ 본 포스팅은 윈도우11 환경에서 패스트 캠퍼스 강의를 수강하며 정리한 내용입니다.

 

 

목차

 

spread 연산자를 사용한 항목 추가

concat을 사용한 항목 추가

 

 

리액트에서 배열에 항목을 추가하는 방법은 크게 2가지가 있다.

  1. spread 연산자 사용
    • spread 연산자를 사용하여 기존 배열을 복사한 후 원하는 값을 넣어주는 방법
  2. concat 함수 사용
    • concat함수를 사용하여 새로운 배열을 만들어 배열의 맨 뒤에 붙여준다.

 

 

 

배열에 요소를 추가한다고 push 함수를 사용하는 것이 아닌 기존의 배열을 바꾸지 않으면서 새로운 배열을 만들어 변화를 줘야 한다. push를 하면 업데이트가 되지 않는다.

push, splice, sort 같은 함수는 사용하면 안 된다.

만약 사용해야 하는 경우라면 배열을 복사하고 난 후 사용해야 한다.

배열의 불변성을 지키면서 새로운 항목을 추가해야 한다.

 

 

users라는 배열이 있다.

const users=[
    {
        id : 1,
        username : 'uni',
        email : 'uni@gmail.com'
    },
    {
        id : 2,
        username : 'dog',
        email : 'dog@gmail.com'
    },
    {
        id : 3,
        username : 'cat',
        email : 'cat@gmail.com'
    }
];

두 개의 inputs와 button으로 배열에 새로운 항목을 추가할 수 있다.

// CreateUser.js //
import React from "react";

function CreateUser({username,email,onChange,onCreate}){ //총 4가지의 props
    // onChange : 텍스트 input 값이 바뀌게 될 때 호출할 이벤트 처리 함수
    // onCreate : 버튼을 눌렸을 때 새로운 항목을 등록해 주는 함수
    // 이 컴포넌트는 필요한 값들을 props로 받아와서 사용할것이다.
    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에서 렌더링 한다.

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

function App() {

  const users=[
    {
        id : 1,
        username : 'uni',
        email : 'uni@gmail.com'
    },
    {
        id : 2,
        username : 'dog',
        email : 'dog@gmail.com'
    },
    {
        id : 3,
        username : 'cat',
        email : 'cat@gmail.com'
    }];

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

  );
}

export default App;

 

 

[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 =>{ // e : 이벤트 객체
  const {name,value} = e.target // name과 value를 e.target에서 가져온다.
    setInputs({
      ...inputs,// 객체에서 spread 연산자를 사용해서 기존 값을 다 넣는 것으로 
      			// 배열에서도 사용할 수 있다.
      [name]:value
    });
  }

  const [users,setUsers] =useState([ // 컴포넌트 형태로 상태 관리
        {
            id : 1,
            username : 'uni',
            email : 'uni@gmail.com'
        },
        {
            id : 2,
            username : 'dog',
            email : 'dog@gmail.com'
        },
        {
            id : 3,
            username : 'cat',
            email : 'cat@gmail.com'
        }
	]);

  const nextId = useRef(4);
  const onCreate = () =>{
  // 새로운 user 객체를 만든다.
    const user = {
      id: nextId.current,
      username,
      email
      // 또는 ...inputs가 username, email과 동일하다.
    }
    
   // 기존의 배열을 복사하여 넣은 다음 새로운 배열을 만들고 user를 넣어주면 새 항목이 추가된다.
   // 이때 기존 배열은 건들지 않는다.
   setUsers([...users,user]);
   
   // 버튼이 클릭 될 때 inputs에 있는 값을 지우도록 한다.
    setInputs({
      username:'',
      email:''
    });
    nextId.current +=1;
  }
  return (
    <>
    <CreateUser username={username} email={email} onChange={onChange} onCreate={onCreate}/>
      <UserList users={users}/>
    </>

  );
}

export default App;

 

[concat을 사용한 항목 추가]

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 : 'uni',
        email : 'uni@gmail.com'
    },
    {
        id : 2,
        username : 'dog',
        email : 'dog@gmail.com'
    },
    {
        id : 3,
        username : 'cat',
        email : 'cat@gmail.com'
    }
]);

  const nextId = useRef(4);
  const onCreate = () =>{
    const user = {
      id: nextId.current,
      username,
      email
      
    }
    
    // 새로운 배열을 만들어서 그 안에 맨 뒤에 user 항목을 맨 뒤에 붙여준다.
    setUsers(users.concat(user)); 
    
    setInputs({
      username:'',
      email:''
    });
    console.log(nextId.current)
    nextId.current +=1;
  }
  return (
    <>
    <CreateUser username={username} email={email} onChange={onChange} onCreate={onCreate}/>
      <UserList users={users}/>
    </>

  );
}

export default App;

 

배열을 추가하고 console.log로 배열을 결과를 확인했을 때 예상했던 것과 다른 결과를 볼 수 있다.

이게 맞나?

 

  const onCreate = () =>{
    const user = {
      id: nextId.current,
      username,
      email
    }
    setUsers(users.concat(user));
    setInputs({
      username:'',
      email:''
    });
    //console.log(nextId.current)
    console.log(users)
    console.log(user)
    nextId.current +=1;
  }

 

리렌더링의 문제로 리더링이 되지 않아 반영이 안 된 시점에서 콘솔에 출력된다.

예상했던 값을 보기 위해서는 컴포넌트가 리렌더링 되고 나면 확인할 수 있다.

 

 

 

잘못된 정보는 댓글에 남겨주시면 감사하겠습니다!😊

댓글과 좋아요는 큰 힘이 됩니다!

 

 

728x90
반응형
저작자표시 비영리 변경금지

'웹 개발 > React' 카테고리의 다른 글

[React] 리액트 배열에 항목 수정하기  (0) 2024.01.03
[React] 리액트 배열에 항목 제거하기  (2) 2024.01.02
[React] 리액트 useRef로 특정 DOM 선택하기 / 리액트 DOM 접근하기  (0) 2023.12.28
[React] 리액트 배열 렌더링하기  (2) 2023.12.27
[React] 리액트 사용자 입력 / input 상태 관리  (2) 2023.12.26
'웹 개발/React' Related Articles more
Comments