JSX의 정의

JSXElement

HTML의 요소와 비슷한 역할을 한다.

• JSXOpeningElement
• JSXClosingElement
• JSXSelfClosingElement
• JSXFragment

JSXElementName

요소의 이름으로 쓸 수 있는것.

• 숫자로 시작하거나 $와_ 외의 다른 특수문자로는 불가능.

JSXAttributes

• JSXSpreadAttributes : 자바스크립트의 전개 연산자와 동일한 역할
• JSXAttribute : 키와 값으로 짝을 이루어서 표현한다.

리액트 파이버

• 리액트에서 관리하는 평범한 자바스크립트 객체다.
• 파이버는 fiber reconciler가 관리한다.
  • reconciliation은 가상DOM과 실제DOM을 비교하는 작업(알고리즘)

클래스형 컴포넌트의 생명주기 메서드

실행 시점

• mount
• update
• unmount

render

• 항상 순수해야 하며 부수 효과가 없어야 한다.
• 내부에서 state를 직접 업데이트하는 this.setState를 호출해서는 안된다.

componentDidMount

• 컴포넌트가 마운트되고 준비되는 즉시 실행된다. (state를 변경했다면 state가 변경되고 그 즉시 다시 한번 리렌더링을 시도한다.)

componentDidUpdate

• 컴포넌트 업데이트가 일어난 이후 바로 실행된다.

componentWillunMount

• cleanup 함수를 호출하기 위한 최적의 위치 (this.setState호출 불가능)

shouldComponentUpdate

• state, props의 변경으로 리렌더링 되는 것을 막고 싶다면 이 생명주기 메서드를 사용한다.

static getDerivedStateFormProps

• render를 호출하기 직전에 호출된다.
• 여기서 반환되는 객체는 해당 객체의 내용이 모두 state로 들어가게 된다.

getSnapShotBeforeUpdate

• dom이 업데이트되기 직전에 호출된다.(componentwillupdate를 대체할 수 있는 메서드)
• 윈도우 크기 조절, 스크롤 위치 조정하는 등의 작업을 처리하는 데 유용한다.

getDerivedStateFromError

• 에러가 발생했을 때 호출되는 에러 메서드다.
• 이 메서드를 사용해서 에러 처리 로직을 구현할 수 있다.
• 부수 효과를 발생시켜선 안된다. 그러므로 에러 로깅도 불가능하고 어떻게 자식 컴포넌트를 렌더링할지 결정하는 용도일 뿐

componentDidCatch

• 에러가 발생했을 때 실행되며 getDerivedStateFromError여기서 에러를 잡고 state를 결정한 이후에 실행된다.

클래스 컴포넌트는 복잡하고 어렵다.

처음보는 메서드도 너무 많고 컴포넌트를 하나 만드는데 신경써야할 생명주기가 너무 어렵고 추적도 쉽지 않을 것 같다. 재사용도 힘들어 보임.

함수형 vs 클래스

함수형 컴포넌트는 렌더링이 일어날 때마다 그 순간의 값인 props와 state를 기준으로 렌더링된다. props와 state가 변경된다면 다시 한 번 그 값을 기준으로 함수가 호출된다고 볼 수 있다. 반면 클래스형 컴포넌트는 시간의 흐름에 따라 변화하는 this를 기준으로 렌더링이 일어난다.

리액트의 렌더링

리렌더링이 발생하는 경우

• this.setState
• forceUpdate
• useState
• useReducer
• key props의 변경

렌더와 커밋 단계

렌더 단계

• 컴포넌트를 렌더링하고 변경 사항을 계산하는 모든 작업 (type,props,key)와 같은 것들을 비교하고 변경이 필요한 컴포넌트를 체크하는 단계

커밋 단계

• 렌더 단계의 실제 변경 사항을 실제 DOM에 적용해 사용자에게 보여주어야 하는 과정을 말한다.
• 리액트의 렌더링이 일어난다고 해서 무조건 DOM 업데이트가 일어나는 것은 아니다.

컴포넌트를 렌더링하는 작업은 별도로 렌더링을 피하기 위한 조치가 돼 있지 않는 한 하위 모든 컴포넌트에 영향을 미친다.

부모가 변경됐다면 무조건 자식 컴포넌트도 리렌더링 된다.