Props

• react의 data flow는 낙수효과와 같다. 모든 데이터가 단방향, 위에서 아래로 흐르며 아래로 흐른 데이터는 다시 위로 올라갈 수 없다.
  이때 위에서 내려오는 물줄기를 props에 비유할 수 있다. Props는 상위 컴포넌트에서 하위 컴포넌트로 전달되는 데이터다.
• Props는 읽기 전용 데이터이기 때문에 하위 컴포넌트에서는 단순히 사용만 할 뿐 변경할 수 없다.
• 또한 불변한 속성을 가지고 있어, 동일한 입력이 주어지면 항상 동일한 출력을 랜더링한다.

State

• 컴포넌트의 상태를 나타낸다. 어떤 컴포넌트에서 동적인 데이터를 관리할 때 state를 생성하며, constructor에서만 할당할 수 있다.
• state는 직접 변경할 수 없다. state를 직접 변경하면 리액트가 변화를 감지하지 못하고, 다시 랜더 하지 않기 때문이다.
• 그래서 이용하는 것이 setState 메소드다. setState는 여러번 호출할 수 있다. 리액트가 여러 setState 호출을 만나면, 각 setState 호출에 전달된 모든 객체(state는 객체 형태다)를 추출하여 배치하고, 이를 merge하여 단일 객체로 만든 뒤에 setState()를 수행한다.

Life Cycle

• 페이지에 렌더링 되기 전부터 페이지에서 사라질 때까지 컴포넌트의 수명을 나타낸다. 컴포넌트가 생성, 업데이트, 삭제될 때 일어나는 과정으로 각 과정 전후에는 특정 메소드가 호출된다. 각각의 시점을 이용해 다양한 이벤트를 원하는 상황에 맞게 활용할 수 있다.
  

*이 이미지의 출처는 어디일까요? 여러 곳에서 많이 봤지만 정확한 출처를 찾으려고 하니 링크를 타고타고타고타고타고타기만하는데...

Functional Component VS Class Component

1) Functional Component

2) Class Component

---블로그를 이전하며 자료 보충하고 있습니다---