리액트 배열 추가, 삭제, 수정

• 배열 값을 업데이트를 해야하는 경우에도 객체와 동일하게 불변성을 지키야한다.
  • push, splice, sort 와 같이 배열을 직접적으로 제어 할 수 있는 함수를 쓰면 안된다!
  • 상태관리를 위해 동일하게 useState 를 사용하면 된다.

  const [users, setUsers] = useState([
      생략
    ])
  

• Vue로 작업을 진행할때는 deep clone을 하지 않는다면 서로 값을 계속 공유하는 현상이 일어나는 반면 리액트는 이를 제어 할 수 있는 점이 상당히 편리한 점이 될 것 같다. ( 뭐 좀 더 써봐야 알겟지만…! )

배열 추가

1. 새로운 배열 원소를 생성
2. useState로 기존 배열을 복사한 후 생성한 배열 원소를 추가한다.
   1. spread
   2. concat

const onCreate = () =>{
    // 1. 새로운 유저 객체 생성
    const user = {
      id: nextId.current,
      // ...inpus 와 동일
      username,
      email
    }
    
    // 배열에 항목을 추가 하는 방식 : 
    // 1. spread 연산자,
    // 2. concat
    // push같은 함수를 사용하면 업데이트가 되지않음!
    // setUsers([...users, user]);
    setUsers(users.concat(user))

		//입력값 초기화
    setInputs({
      username:'',
      email:'',
    })

    nextId.current += 1

  }

컴포넌트 간의 prop에 event handler 도 전달이 가능하다

<CreateUser 
        username={username} 
        email={email}
        onChange={onChange}
        onCreate={onCreate} //event 객체 전달
/>

//전달 받은 이벤트 객체는 변수 사용법과 동일하다
function CreateUser({username, email, onChange, onCreate}){
  return(
    <div>
      <input
       name="username" placeholder='user name' onChange={onChange} value={username}/>
      <input  
       name="email" placeholder='email' onChange={onChange} value={email}/>
      <button onClick={onCreate}> register</button>
    </div>
  )

}

배열 삭제

• filter 함수로 원하는 값을 처리한 후 useState 에 필터된 배열을 생성

const onRemove = (id) =>{
    setUsers( users.filter(user =>
      user.id !== id))
  }

function User({ user, onRemove, onToggle }) {
  const {id, username, email, active } = user;
...
{/* 매개변수를 넘기기 위해서 함수를 새로 정의
    함수를 바로 호출한다면 컴포넌트가 렌더링되자마자 
    실행되기때문에 주의! */}
<button onClick={() => onRemove(id)}>Remove</button>
})

배열 수정

• map 으로 기존 객체의 값을 수정 후 useState에 수정된 배열을 생성한다.
• 그럼 항상 배열을 전체 다 돌아야 하는건가...?? 🧐
  • 강의 진행 후에 나올 것으로 예상..말이 안됨 
• 자식 객체에서 부모 객체로 전달 가능한 이벤트가 있어야 input 값으로 수정이 가능 할 것 같다
  • 강의 진행 후에 역시 나올 것 같다

const onToggle = (id) =>{
    //불변성을 지키기위해 map 함수 사용
    //객체 수정도 새로운 객체를 만들어서 사용
    setUsers(users.map(
      user => user.id === id
      ? {...user, active: !user.active}: user
    ))  
  }

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

 

리액트는 불변성 유지가 잘 되기 때문에 상태 관리가 편할 것 같은 반면 너무 제약되어 있어 귀찮을 것 같기도 하다.

하지만 귀찮은만큼 조금 더 안정적인 프로그램을 짤 수 있을 것 같다. 

 

리액트 입문 강의

1. 리액트 입문 강의 정리