Props란?

기본적으로 Component에 원하는 값을 넘겨줄 때 사용하며
넘겨줄 수 있는 값은 변수, 함수, 객체, 배열 등 JavaScript의 요소라면 제한이 없습니다.
주로 Component의 재사용을 위해 사용합니다.

Props는 읽기 전용

Props의 값 임의로 변경해서 사용X
변경해서 사용하고 싶다면 새로운 변수 생성해서 사용
문법적으로 잘못된 것은 아니지만 React가 Props를 감지하고 재렌더링하는 데에 있어 문제를 야기할 수 있음.

---

DOM Element의 Attributes

1. 기본적인 DOM Element(div, span 등)들의 Attribute는 camel case로 작성
   -- ex) tabIndex, className 등
2. 그러나 'data-' 또는 'aria-'로 시작하는 Attribute는 예외
   -- ex) data-type, aria-label 등
   -- aria - 접근성과 관련된 설정의 접두어
3. HTML의 Attribute와 다른 이름을 가지는 Attribute가 있음
   -- class -> className, for -> htmlFor 등
4. HTML의 Attribute와 다른 동작 방식을 가진 Attribute가 있음
   -- checked - (defaultChecked), value - (defaultValue), style 등
5. React에서만 쓰이는 새로운 Attribute가 있음
   -- key, dangerouslySetInnerHTML 등

HTML 과 다른 방식의 REact Attribute(checked, value)

HTML에서 checked 또는 value는 해당 값이 '초기값'으로 쓰이지만
React 내에서는 현재값을 의미함


이 말은 즉, 위 예시처럼 checked 값이 false로 고정되어있는 경우에 사용자가 checkbox를 클릭해도 값의 변화가 일어나지 않음


만약 '초기값'의 의미로 checked 또는 value를 사용하고 싶다면
defaultChecked, defaultValue Attribute를 설정할 것

React에서만 쓰이는 새로운 Attribute(key)

Key
1. React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 도움
2. 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 Element에 지정해야 함
3. 배열 안에서 형제 사이에서 고유해야 하고 전체 범위에서 고유할 필요X
4. 두 개의 다른 배열을 만들 때 동일한 key를 사용할 수 있음