[React] 리액트 배열에 항목 수정하기

 

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

 

---

목차

 

map 함수를 사용한 배열 항목 수정하기

정리

 

---

 

---

[ map 함수를 사용한 배열 항목 수정하기 ]

 

불변성을 지키면서 배열을 업데이트할 때 자바스크립트 배열 내장함수 map 함수를 사용해야 한다.

기존의 map 함수는 배열을 특정 형태를 가진 형태로 변환해 줄 때 사용했다.

특정 객체 배열 컴포넌트 Element 형태로 변환해 줬었는데 배열에 있는 특정 요소만 업데이트할 때도 map 함수를 사용할 수 있다.

https://devyihyun.tistory.com/144

[JavaScript] 배열 내장 함수

 

 

특정 객체를 업데이트해야 할 때도 기존의 객체를 그대로 수정하는 것이 아닌 새로운 객체를 만들어 기존에 가지고 있던 객체를 넣어주고 특정 값을 바꿔주는 형태로 구현해야 한다.

 

---

 

컴포넌트에서 계정명을 클릭했을 때 색상이 초록색으로 바뀌고 다시 누르면 검색으로 바뀌도록 구현하였다.

 

// CreateUser.js //
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;

 

---

 

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


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

  const onRemove = id=>{
    setUsers(users.filter(user=>user.id !== id));
  }
  // 클릭하면 
  const onToggle = id=>{
    setUsers(users.map(
      user=>user.id===id ? {...user,active:!user.active} : user
      ));
  }
  
  return (
    <>
    <CreateUser username={username} email={email} onChange={onChange} onCreate={onCreate} />
      <UserList users={users} onRemove={onRemove} onToggle={onToggle}/>
    </>

  );
}

export default App;

 

  const onToggle = id=>{}

<onToggle 함수>

• id 값을 파라미터로 가져온다.
• users에 있는 특정 id를 선택해서 액티브 값을 반전시켜 준다.
• 전체 배열을 업데이트하는 것처럼 보인다.
• 만약 id가 일치한다면 : 업데이트한다.
• 만약 id가 일치하지 않는다면 : 기존 것을 그대로 둔다.

setUsers(users.map());

배열 안에 있는 원소를 업데이트할 때는 map 함수를 사용한다.

user=> user.id===id ? {...user,active : !user.active} : user;

• user.id가 파라미터로 가져온 id 값과 같다면 user를 파라미터로 가져온다.
  • ...user : user 객체를 업데이트한다. 그 객체를 업데이트할 때도 불변성을 지켜야 하기 때문이다.
  • active: !user.active : onToggle 함수를 호출할 때마다 active 값이 반전된다.
• :user : user.id가 일치하지 않을 때 값을 그대로 사용하겠다.

 

---

 

// UserList.js //

import React from "react";

function User({user, onRemove,onToggle}){
    const {username,email,id,active}=user;
    return(
        <div>
            <b 
            style={{
                color: active? 'green': 'black',
                cursor : 'pointer'
            }}
            onClick={()=>onToggle(id)}
            >
            {user.username}</b> <span>{user.email}</span>
            <button onClick={()=>onRemove(user.id)}>삭제</button>
        </div>
    );

}

function UserList({users,onRemove,onToggle}){
    return(
        <div>
            {
                users.map(
                    user =>(<User user={user} key={user.id} onRemove={onRemove} onToggle={onToggle}/>)
                )
            }
        </div>
        
    );
    
}

export default UserList;

 

const {username,email,id,active}=user;

active의 값을 받아와서 사용할 수 있다. active의 값에 따라 <b> 태그를 설정한다.

<b 
    style={{
        color: active? 'green': 'black',
        cursor : 'pointer'
    }}
    onClick={()=>onToggle(id)}
>
{user.username}</b>

color : active? 'green' : 'black' : active가 true 면 green , 그렇지 않으면 black

cursor : 마우스를 올렸을 때 커서 모양이 손가락 모양으로 변한다.

---

<정리>

• 수정할 때 불변성을 지켜준다.
  • 불변성을 지킨다는 건 state 값을 유지한다고 생각하면 된다.
• 수정할 때 map과 if 문을 비교하여 setState를 활용한다.
• style 속성에도 js를 사용할 수 있다.
• boolean 값으로 on/off 할 때 onToggle 이란 함수를 자주 사용

 

 

 

---

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

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

 

[ 참고자료 ]

 

https://react.vlpt.us/basic/15-array-modify.html

15. 배열에 항목 수정하기 · GitBook