diff --git "a/Phase - 1/07-\355\225\231\354\212\265-\354\240\220\352\262\200-\354\247\210\353\254\270.md" "b/Phase - 1/07-\355\225\231\354\212\265-\354\240\220\352\262\200-\354\247\210\353\254\270.md" index 3970c81..82187b9 100644 --- "a/Phase - 1/07-\355\225\231\354\212\265-\354\240\220\352\262\200-\354\247\210\353\254\270.md" +++ "b/Phase - 1/07-\355\225\231\354\212\265-\354\240\220\352\262\200-\354\247\210\353\254\270.md" @@ -30,12 +30,9 @@ function UserProfile({ isLoggedIn }) { ``` [여기에 답변을 작성하세요] - - - - - - +1. 조건문 내부에 Hook 사용 +2. React에서는 순서대로 Hook을 처리하는데 조건문 내부에 있으면 순서 추적이 어려움 +3. SwiftUI의 @State var 변수가 조건문 내부에서는 선언 안됨 ``` --- @@ -186,14 +183,10 @@ const TodoItem = React.memo(({ todo }) => { ``` [여기에 답변을 작성하세요] - - - - - - - - +1. 방법 A는 기존 객체를 그대로 사용하고 방법 B는 새 객체를 만들어서 사용함 +2. React는 메모리 주소 참조에 따라 변경을 감지하는데 기존 객체를 그대로 사용하면 메모리 주소가 바뀌지 않아 감지하지 못함 +3. 단기적으로는 더 많은 메모리를 사용하지만, 장기적으로는 얕은 비교를 통한 렌더링 비용이 낮게 나와 성능적으로 향상되기 때문 +4. 방법 B, React.memo는 얕은 비교를 통한 props를 구분하고 다르다고 판단될 때 리렌더링을 진행하기에 새 객체를 생성하여 불변성을 유지하는 방법 B가 제대로 동작함 ``` --- @@ -448,9 +441,10 @@ document.getElementById('item-50').textContent = 'Updated'; ``` [여기에 답변을 작성하세요] - - - +1. 변경 내역이 단순할 때 +2. 선언적 UI, 최소한의 DOM 업데이트 등 +3. C < A < B, Dom으로 적은 개수를 조작할때가 제일 빠를거고, A가 Virtual DOM의 이점, B가 일반 DOM의 단점이라 이 순서로 함 +4. 둘 다 View를 재사용한다는 공통점이 있지만, React의 리스트는 선언형 UI고, RecyclerView는 명령형 UI라는 차이가 있음