10.04.22{코딩일기}벨로퍼트와 함께하는 모던 리액트 1-14~15 챕터리뷰

[새롭게 알게 된것]

---

1.리엑트로 배열요소를 삭제할땐  해당요소의 상태값 id와 이벤트함수 파라미터를 활용함

---

기존 코어자바스크립트로 삭제할땐 arr.remove(x)로 삭제할 요소를 바로 제거할 수 있었음.

하지만 리액트에선 App.js에 선언된 onRemove(이름은 상관없음) 함수에 삭제할 버튼의 함수 파라미터에 id값을 넘겨주어

function User({ user, onRemove }) {
  return (
    <div>
      <b>{user.username}</b> <span>({user.email})</span>
      <button onClick={() => onRemove(user.id)}>삭제</button>
    </div>
  );
}

삭제하면됨. 참고로 filter또한 깊은복사객체를 반환함.

  const onRemove = id => {
    // user.id 가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬
    // = user.id 가 id 인 것을 제거함
    setUsers(users.filter(user => user.id !== id));
  };

그러면 리렌더링은 잘되나? 물론 잘됨 왜냐하면 user의 정보는 state로 관리되기 때문. 

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

 

---

 

2. CSS값 또한 배열로 수정관리 가능함

---

배열의 불변성을 유지하면서 배열을 업데이트 할때도 map함수를 사용가능한데 이를 수정관리할때 활용가능.

id값을 비교해 id가 다르다면 그대로 두고, 같다면 active값을 반전시키도록 구현하는 방법을 알게됨

클릭한 요소의 id는 현재id와 당연히 같을테니깐 active가 false가 될 수 밖에 없음. 

그래서 아래 style coloer가 green이 되는거임. 

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

왜냐 초기값은 false니깐. 만약 다시 클릭해도 !user.active 니깐 참을 부정하면 다시 부정이되므로 검정으로 돌아감.

  const [users, setUsers] = useState([
    {
      id: 1,
      username: 'velopert',
      email: 'public.velopert@gmail.com',
      active: true
    },

 

---