부모 컴포넌트의 render (){ return ( 렌더될 jsx코드가 있는 위치 )} 에 자식 컴포넌트 <child>가 있다. <child> 의 Props이름 titleColor로 this.state.color 값을 전달하고 있다. Parent 컴포넌트에서 state로 명시해둔 값을 자식도 사용하기 위해 props값으로 전달해서 사용하는 것이다. 부모 컴포넌트에서 동적으로 데이터를 변경시키는 setstate함수를 props값으로 자식 컴포넌트에 넘긴다면 자식 컴포넌트에서도 부모의 렌더 상태를 바꿀수 있다. (여기서 렌더 상태를 동적으로 변화시킨다는 것이지 부모의 setState값을 자식컴포넌트 내에서 변경할수있다는 의미가 아님 react시스템의 flow방향은 위에서 아래로 한방향 )
자식 컴포넌트 페이지로 들어와서 살펴보자. 렌더될jsx코드를 보면 부모의 state값을 받아서 쓰는 것이기 때문에 this.state.color라고 쓰던 자바스크립트 코드를 this.props.내가-지어준-프롭스이름 라고 써준다.
life cycle의 flow를 보자. 부모에서 state를 constructor 에 명시하고 부모가 렌더되면--> 부모렌더안에 있는 자식 컴포넌트로 흐름이 넘어가서 자식 constructor
--> 자식 렌더링으로 넘어감. 자식의 component가 mount된 후로 부모 컴포넌트로 다시 흐름이 이동(복귀) 부모의 component가 mount되고 fetch받아오고 업데이트 발생하면 그 업데이트된것을 다시 render하고 부모를 render하면서 다시 자식이 렌더--> 자식의 컴포넌트가 update.
