key는 왜 필요할까?
React는 key를 통해 기존 트리와 이후 트리의 자식들이 일치하는지 확인한다.
개발자는 key를 통해, 여러 렌더링 사이에서
어떤 자식 엘리먼트가 변경되지 말아야 할지 표시해 줄 수 있다.
<ul> <li key="2015">Duke</li> <li key="2016">Villanova</li> </ul> <ul> <li key="2014">Connecticut</li> <li key="2015">Duke</li> <li key="2016">Villanova</li> </ul>
배열의 인덱스를 key로 사용할 수 있으나, 권장하지 않는다.
배열의 항목들이 재배열되지 않는다면 괜찮지만,
재배열되는 경우 state와 관련된 문제가 발생할 수 있다.
인덱스를 key로 사용하면, 항목의 순서가 바뀌었을 때 key 또한 바뀌어 버린다.
그 결과로 컴포넌트의 state가 엉망이 되거나 의도하지 않은 방식으로 바뀔 수 있다.
state를 직접 수정하지마!
리액트에서는 상태를 직접적으로 수정해서는 안 된다.
이미 만들어진 오브젝트는 항상 불변성(Immutability)을 유지하는 것이 좋다.
// Bad <button onClick={() => { this.state.count++; this.setState(this.state); }} > Click </button> // Good <button onClick={() => { this.setState(state => ({ count: state.count + 1, })); }} > Click </button>
1. setState는 비동기적으로 동작한다.
상태를 직접 수정하면서 업데이트할 경우,
이전 업데이트 내용이 다음 업데이트 내용으로 덮어 쓰여질 위험이 있다.
비동기 특성으로 인해 예상하지 못한 버그가 발생할 위험이 존재한다.
2. PureComponent에서 정상 동작하지 않는다.
PureComponent는 props와 state를 얕은 비교를 통해 비교한 뒤,
변경된 것이 있을 때는 리렌더링하고, 변경된 것이 없다면 리렌더링하지 않는다.
상태를 직접 변경할 경우, 동일한 오브젝트가 전달되므로 레퍼런스가 동일하다.
PureComponent는 상태가 동일하다고 판단하고 리렌더링을 하지 않는다.
![[React] Pure Component란?](https://www.notion.so/image/https%3A%2F%2Fstatic.velog.io%2Ffavicon.ico?table=block&id=b51ab998-3106-43e7-9080-7696a3d94232&cache=v2)
![[React] Pure Component란?](https://www.notion.so/image/https%3A%2F%2Fvelog.velcdn.com%2Fimages%2Fdolarge%2Fpost%2F66b6ba99-0524-4067-9db7-0d2784e2665e%2Fimage.png?table=block&id=b51ab998-3106-43e7-9080-7696a3d94232&cache=v2)