props, state (Section 4)

참고> velopert.com/3629

 

1. 리액트 컴포넌트에서 다루는 데이터는 두 개로 나뉨: props, state

2. props: 부모 컴포넌트가 자식 컴포넌트에게 주는 값
-> 자식 컴포넌트는 props를 받아오기만 하고, 받아온 props를 직접 수정할 수는 없음

3. state: 컴포넌트 내부에서 선연하며 내부에서 값을 변경할 수 있음

4. 자신이 받아온 props 값은 "this." 키워드를 통해 조회 가능

5. props의 기본값을 설정할 때에는 컴포넌트의 defaultProps를 설정할 수 있음

6. 함수형 컴포넌트와 클래스형 컴포넌트의 주요 차이점은 state와 LifeCycle이 빠져있다는 점.
-> 성능상 미세한 차이가 있으나, 무수히 많은 컴포넌트를 렌더링할게 아니라면 성능적으로 큰 차이는 없음.

7. 컴포넌트의 state를 정의할 때에는 class fields 문법을 사용해서 정의해야 편함.

8. 버튼 클릭 이벤트 등으로 다른 함수를 호출할 때에는 this 에 대한 reference가 끊기지 않게 화살표 함수를 사용해주는게 좋음.
아니면 constructor에서 직접 해당 함수를 컴포넌트에 바인딩 시켜주는 추가 작업이 필요함.
이마저도 안하면 함수가 호출될 때 this가 undefined로 나옴.

9. setState: state에 있는 값을 바꾸기 위해서는, this.setState를 무조건 거쳐야 함.
-> React는 이 함수가 호출되면 컴포넌트가 re-rendering 되도록 설계되어 있음.
-> 객체로 전달되는 값만 업데이트 해줌.
-> setState는 객체의 depth가 깊은 곳까지 확인하지 못함. state내의 객체 A 안에 있는 또다른 객체 B만 변경되면 B만 업데이트되는게 아니라,  A가 새걸로 교체됨.

10. ... 연산자: 전개 연산자
-> 기존의 객체 안에 있는 내용을 해당 위치에 풀어주는 연산자.

ex) ...this.state.foo

-> setState에서 객체의 깊은 곳까지 변경하고 싶은 경우는 전개 연산자(...) 를 써서 기존 객체를 불러온 후 변경하고자 하는 값으로 업데이트 해야함.

 

11. 비구조화 할당

12. React 이벤트 함수 설정
-> 이벤트 이름은 camelCase로 설정.
-> 이벤트에 전달해주는 값은 함수여야 함.