state, props

class component에는 state라는 멤버변수가 있는데 그 변수는 object이다. object에는 count라는 데이터가 있다. 

jsx - 자바스크립트 코드 변수나 함수를 이용하거나 비즈니스 로직을 작성할 때는 괄호를 사용해야한다. 

React에는 synthetic event라고 해서 일반 돔 요소에서 발생하는 이벤트 오브젝트와는 약간 다른 개념이다. 브라우저에서 발생할 수 있는 모든 이벤트는 event라는 오브젝트로 대표할 수 있는데 이벤트 오브젝트 안에는 이벤트와 관련된 모든 정보들이 들어있다. 그것과 마찬가지로 브라우저에서 발생하는 이벤트를 그냥 쓰는 것이 아니라 리액트는 리액트 나름대로 그 이벤트를 한 단계 더 감싸는 자신만의 이벤트 클래스를 쓴다. 그것이 바로 synthetic event이다. 그래서 synthetic event에는 브라우저 이벤트에서 사용하는 함수, 데이터들이 기본적으로는 다 들어있다. 

그냥 오브젝트에 있는 데이터를 업데이트하게 되면 리액트는 업데이트가 됐는지 안됐는지 모른다. 그래서 꼭 state를 업데이트 할 때는 리액트에서 제공하는 setState를 호출 해 주어야한다. 

 

Props(Properties)

부모 컴포넌트나 다른 컴포넌트로부터 데이터를 받아서 데이터를 표기하기 위해서 쓰인다. 재사용성을 높이기 위해서는 데이터를 받아서 해당하는 데이터를 보여줄 수 있도록 만드는 것이 중요하다.

 

리스트에서는 고유한 키를 써야한다. 리액트에서는 자식 컴포넌트가 있으면 고유한 키를 가지고 있어야한다. 각각의 컴포넌트에 아이디를 부여함으로써 아이디가 동일하다면 이 자식 요소가 변경되어진게 아니기 때문에 나중에 다른 자식요소가 추가되거나 위치가 변경이 되어도 아이디가 동일하다면 리액트가 조금 더 성능개선을 위해서 불필요한 렌더링을 하지 않는다던지 아이디를 이용해서 성능을 계산한다. 그래서 이 리스트 안에서 쓰이는 자식 컴포넌트에게 아이디를 부여하는 것이 굉장히 중요하다. 배열에 있는 index는 사용해선 안된다. 배열의 인덱스를 사용한다는 것은 동일한 아이템이 순서가 바뀌게 되면 인덱스가 바뀌게 된다. 동일한 오브젝트인데도 불구하고 key가 달라질 수 있다. 그러므로 인덱스는 절대 사용해서는 안되고 오브젝트가 가지고 있는 고유한 아이디를 사용해야한다.