props, state, 리렌더링 발생 조건

props와 state의 공통점

props와 state는 둘 다 일반 JavaScript 객체이며,
렌더링 결과물에 영향을 주는 정보를 갖고 있습니다.

props와 state 둘 다
부모 컴포넌트로부터 초기값을 받을 수 있고,
컴포넌트 안에 디폴트 값이 설정되어 있으며,
자식 컴포넌트의 초기값을 설정할 수 있습니다.

props와 state의 차이점

props는 함수의 매개변수처럼
컴포넌트에 전달되지만, 
state는 함수 안에 선언된 변수처럼
컴포넌트 안에서 관리됩니다.

props는 부모 컴포넌트에 의해 바뀔 수 있고
자식 컴포넌트 안에서 바뀔 수 있지만,
state는 부모 컴포넌트에 의해 바뀌지 못 하고
자식 컴포넌트 안에서 바뀔 수 없습니다.

state는 컴포넌트 내부를 바꿀 수 있지만,
props는 컴포넌트 내부를 바꿀 수 없습니다.

리렌더링 발생 조건

먼저, 렌더링은 컴포넌트의 정보를 이용해
화면을 보여주는 것을 말합니다.

렌더링이 자주 일어나면
컴퓨터 속도가 저하되고, 메모리 사용량이 많아집니다.
따라서 렌더링을 최소화할 필요가 있습니다.
그러려면 렌더링이 언제 일어나는지 알아야겠죠.

렌더링은
1. props가 바뀔 때
2. state가 바뀔 때
3. 부모 컴포넌트가 렌더링 될 때
자식 컴포넌트에서 일어납니다.