렌더링과 리렌더링 > 재조정(Reconciliation) > useMemo, useCallback > 메모이제이션

SPA - 동기화
: 왼쪽에 화면 바뀌면 오른쪽 화면도 즉시 바뀌는 것이 반영된다

리액트 -> NextJS

바닐라JS VS 리액트

바닐라js	리액트
변경으로 인해 element를 다시 그림	변경된 부분만 다시 그림. 효과적이다.
새로운 객체 생성. 객체는 그대로 있고 값만 변함	바뀐 것을 알려면 계속 비교를 해야 한다 - 비교 알고리즘이 필요하다 : key 속성

최후의 수단으로 배열의 인덱스를 key로 사용할 수 있다. 항목들이 재배열되지 않는다면 이 방법도 잘 동작할 것이지만 재배열되는 경우 비효율적으로 동작할 것이다.

불변객체

React 엘리먼트는 불변객체(immutable) 이다.
: 개발자는 ReactDOM.render(element, root); 로 전달할 뿐 변경이나 판단 및 반영은 리액트가 알아서 한다.
: 변경사항은 React에게 일임한다.

비교 알고리즘

엘리먼트 타입이 바뀌면 이전 엘리먼트는 버리는 새로운 객체를 그린다.

엘리먼트 타입이 같으면
1. key를 먼저 비교하고
2. props를 비교하여 변경사항을 반영한다(배열, props, 자동변경, useState)

재조정

DOM이 계속 들어오면 이전 버츄얼돔과 한 번 더 비교하고 그것을 반영한다.
같은 타입의 두 React DOM 엘리먼트를 비교할 때 React는 두 엘리먼트의 속성을 확인한다.
동일한 내역은 유지하고 변경된 속성(props)들만 갱신한다
-> 이를 이해하지 못한다면 QuillEditor 초기화 이슈 해결을 못 한다.

엘리먼트(컴퍼넌트)

엘리먼트는 React 앱의 가장 작은 단위이다.
사용자 정의 태그를 생산할 수 있다.

엘리먼트는 화면에 표시할 내용을 기술한다.
사용자 정의 태그(컴퍼넌트, 함수-render(return))가 화면을 출력한다.

이전까지..
UI를 업데이트하는 유일한 방법은 새로운 엘리먼트를 생성하고 이를 root.render()로 전달하는 것이다.
그 안에 선언된 변수들이 모두 초기화 된다 - 유지가 안 된다.
-> 변경된 부분만 업데이트 할 수 있는 것이 리액트

인덱스를 key로 사용 중 배열이 재배열되면 컴포넌트의 state와 관련된 문제가 발생할 수 있다. 컴포넌트 인스턴스는 key를 기반으로 갱신되고 재사용된다. 인덱스를 key로 사용하면 항목의 순서가 바뀌었을 때 key 또한 바뀐다.

find

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/find

includes

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/includes

key2.html : useEffect 사용해보기 - 비교 알고리즘

재배열 되는 경우를 연출

setInterval()

각 호출 사이에 고정된 시간 지연으로 함수를 반복적으로 호출하거나 코드 스니펫을 실행하는 메서드이다.

return () => clearInterval(id);

clearInterval()는 setInterval()을 clean-up 할 때 사용한다.

key2_1.html

<key속성에 올 수 있는 경우의 수>
2가지로 나눌 수 있다
1) 비교 알고리즘이 동작하는 경우 : todo.id, todo.value
2) 비교 알고리즘이 동작하지 않는 경우 : index

• index는 비교 알고리즘이 동작하는 않는 이유
  : 키 값이 포함하고 있는 인덱스 값이 몇 번째 배열(todos[0], todos[1], todos[2])의 컴포넌트인지가 일정하지 않다는 것이다.
  items배열의 모양이 계속 바뀌는 것이다.
  index를 쓰는 순간 계속 가변적이 되는 것이다.

  key={index}
  key={todo.id}
  key={todo.value}

1. key={todo.id}, key={todo.value}
   : 1초에 한 번 씩 순서가 바뀌는데 key2.html과는 다르게 버튼이 통째로 움직이는 것을 확인할 수 있다.
   : 리액트의 비교 알고리즘이 동작하고 있는 것이다.

2. key={index}
   : items 배열 모양이 변화하기 때문에 index 값도 가변적이다. 따라서 todo.id, todo.value와 값이 다르게 출력된다.

결론

배열이 바뀌는 경우는 key값을 index로 하는 것을 반드시 고려해야 한다. 왜냐하면 비교 알고리즘이 동작하지 않을 수 있기 때문이다.

비교 알고리즘에는 재조정이 있다.

재사용 -> key를 제대로 줘야 재사용이 가능하다
-> key는 반드시 변하지 않고 예상 가능하며 유일해야 한다.

key={index}로 주면 중복, 바뀔 가능성 있으므로 key값을 제대로 준 것이 아니다.

<같은 타입의 컴포넌트 엘리먼트>
컴포넌트가 갱신되면 인스턴스는 동일하게 유지되어 렌더링 간 state가 유지된다. React는 새로운 엘리먼트의 내용을 반영하기 위해 현재 컴포넌트 인스턴스의 props를 갱신한다.

< Keys >
문제 해결을 위해 React는 key속성을 지원한다. 자식들이 key를 가지고 있다면 React는 key를 통해 기존 트리와 이후 트리의 자식들이 일치하는지 확인한다.