Key와 Index
리엑트에서 배열을 렌더링 했을때 어떤 요소에 변동이 있을때 key를 사용한다.
key또는 index를 넣어도 돼는데 index를 넣는 방는데 index를 넣는 방식은 선호하지 않는다.
key는 React가 어떤 항목을 변경 추가 또는 삭제할지 식별하는 것을 돕는다.
성능면에서 key가 재랜더링 하는 것을 방지할 수 있다. 성능 면에서는 key를 넣는게 좋다.
index를 사용하는 경우
list.map((item, i) => (
<ItemLi key={i}>{item}</li>
))list에는 [1,2,3,4] 배열이 있다고 하고
key에 index를 넣었다고 해보자 만약 2번 요소를 삭제 시키면 아래 3,4 도 재랜더링 되어 진다.
그래서 key값에는 index 말고 uniq한 값을 key로 지정하면 React가 식별해서 그 요소만 삭제 할 것이다. 이것이 성능에서 좋다는 이야기이다.
key로 넣을게 없을때 index를 최후에 수단으로 넣을 수 있다.
하지만 index를 넣을때는 대도록 요소가 변경이 일어나지 않고 화면에서만 고정된 뷰로 보여질 때만 사용하자 (추가,삭제..등등)
Props와 State 차이
Props
props는 부모 컴포넌트가 자식 컴포넌트에 전달하는 데이터이다.
props는 변할 수 없고 props는 상속받은 컴포넌트 내에서 수정이 불가능하다.
State
State는 컴포넌트의 상태를 나타내고 props와 반대로 변할 수 있다. 상태에 따라 변할 수도 있고 직접 변형이 가능하다.
