2주차 토요일 회의록

Diff Algorithm

Want Todo

• diff algorithm
  • isChanged 구현
  • replace child 변경 → test 해보기 , 부모가 바뀐경우 자식은 props,type이 같아로 랜더링이 되어야한다.
  • 순서 변경 시 모두 업데이트 되지 않게하기
• fragment 이용해서 DOM 조작 최소화

Diff Algorithm

• 태그가 바뀌었을 때, 하위 노드들도 PLACEMENT로 해서 다시 만들기
• type / props도 비교를 해야되지만, children들이 바뀔수 있다.
• diff 알고리즘을 통해서 변화가 없는 노드의 경우 자식들을 탐색하지 않고싶어서 diff를 생각했지만 불가능 → 결국에는 자식노드를 검사해야함

rendering을 변화가 있는 부분만 하려고 함.

before:

after:

HOW❓

• isUnchanged 함수 props를 비교해서(children값을 뺀) 모두가 같으면 true return

• shallowEqual 함수

• props의 key, value값만 비교하기 위해 만든 함수

• determineState에서 sameType이고 isUnchanged라면 effectTag에 NONE값을 준다.

children 순서가 바뀌었을때나 중간 삽입이 생겼을때, 삭제가 되었을때 불필요한 PLACEMENT 없애기

• Map( keys, alternate ) 값을 parent에 둬서 저장한다.
• createVnode를 할 때, parent의 keys값이 있는지 확인하고 alternate값이 isChanged이 아니라면 변화가 없다는 것이므로 effectTag = "NONE"으로 주고, realDOM에 반영될때 아무런 DOM 조작을 하지 않는다.

😵 parent가 PLACEMENT일때 하위 node들을 삭제한다... 오류가 있어유

---

useState 팀

children 순서가 바뀌었을때나 중간 삽입이 생겼을때, 삭제가 되었을때 불필요한 PLACEMENT 없애기

• Map( keys, alternate ) 값을 parent에 둬서 저장한다.
• createVnode를 할 때, parent의 keys값이 있는지 확인하고 alternate값이 isChanged이 아니라면 변화가 없다는 것이므로 effectTag = "NONE"으로 주고, realDOM에 반영될때 아무런 DOM 조작을 하지 않는다.

😵 parent가 PLACEMENT일때 하위 node들을 삭제한다... 오류가 있어유

개선해야 할 사항

1. 배열일 경우 처리

   <ul>
           {numbers.map((value, index) => {
             return <li key={index}>{value}</li>;
           })}
         </ul>

2. setState를 호출할 때 연쇄적인 호출

   1. 버튼이 4에서 5로 +1 된다고 칠 때 1,2,3,4,5가 호출되어 5가 됨.