항해톡 끝! OSI 7계층 발표했는데... 좀 빈약하지만 나름 간결하게 정리한 게 만족.

2. 후... props...

---

React란

• 컴포넌트 기반으로 DOM을 조작할 수 있도록 도와주는 라이브러리
• JSX 사용
• React !== JSX

JSX, Transpile

<div todos={"test todo"}>
  <div>TODO List</div>
</div>

React.createElement("div", {
	id: "test todo"
}, React.createElement("div", null, "TODO List"));

바벨

Component

• 캡슐화
• Class/Function 두 가지를 이용해 렌더링 할 수 있도록 지원

Life Cycle

• mount
  - Dom에 요소를 놓는것
  - constructor()
  - getDerivedStateFromProps()
  - render()
  - componentDidMount()
• render / update
  - 처음 랜더링될때
  - state나 props가 변경되어 컴포넌트가 update 될때
  - getDerivedStateFromProps()
  - shouldComponentUpdate()
  - render()
  - getSnapshotBeforeUpdate()
  - componentDidUpdate()
• unmount
  - 컴포넌트가 DOM에서 삭제될때
  - componentWillUnmount()

Class Component

• 컴포넌트 마운트 단계에서 인스턴스를 생성하고 다시 생성하지 않음.
• 화면이 다시 랜더링 돼야하면 인스턴스에 있는 render method를 호출
• Virtual Dom, 랜더링하는 모든 컴포넌트의 인스턴스를 메모리에 저장.

Function Component

• 함수. 반환값이 React.createElement 함수의 결과 값(객체)이면 됨.
• 화면이 다시 랜더링 돼야하면 함수 전체를 다시 평가한다.(함수를 계속 실행한다)
• 랜더링 할 컴포넌트에 이전과 다른 래퍼런스를 가지는 값을 전달하면 다시 랜더링.
  - 메모이제이션

Component

• ReactDom.render() 이 트리구조의 객체를 HTML로 변환하여 랜더링.
  - Virtual Dom도 React.createElement에 의해 생성된 객체를 메모리에 저장해두고 랜더링 하기 전에 비교
  - React VirtualDom의 '가상'적 표현 === React.createElement()