[React] 시작 전 준비 단계 트러블 슈팅 (Trouble Shooting)

리액트 key 에러 

Each child React element in a collection should have a 'key' prop.

자식 Element(요소) 를 map같은 걸로 여러개 생성시 key 값을 지정하지 않으면 해당 워닝을 뱉어냅니다.

그 이유는

리액트에서는  DOM 트리를 업데이트 할때 key 속성을 통해 (리액트에만 있음) diff 알고리즘을 적용하여

렌더링을 최적화한다고 해요

그래서 key 속성이 없어도 화면에 뿌리는데는 문제는 없지만 diff알고리즘을 활용하지 못하기 때문에

렌더링 성능에 영향을 주게 됩니다.

그래서 에러는 아니고 경고 로 뿌려주게 된다고 하더라구요

그래서 현재 작성된 요소가 부모 의 자식으로 들어가는 경우는 key 속성을 넣는 버릇(?) 습관(?) 을 들여야 할것 같습니다.

// 리액트 에서 컴포넌트들을 생성하는것은 파스칼 케이스에 해당되기 때문에 gdlButton 와 같이 생성하면 렌더링이 되지 않습니다.

-> GdlButon 과 같이 첫 문자가 대문자로 오는 파스칼 케이스여야 합니다.

The tag <gdlButton> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.