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

랜더링

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