[Tech] 재조정(Reconciliation) & state/props

재조정(Reconciliation)은 무엇인가?!

• React를 사용하는 이유는 빠른 렌더링에 있다.
• 이 빠른 렌더링은 React에서 사용하는 Virtual DOM과,
  기존 Virtual DOM과 비교하여, 차이가 있는 부분만 실제 DOM에 적용하여 이뤄낸다.

재조정(Reconciliation)의 구현

재조정은 크게 두 가지 방식으로 구현된다.

1. Diffing Algorithm
   두 트리를 비교할 때, 해당 루트 요소부터 비교한다.
   • 요소의 타입이 다른 경우
     ⇒ 이전 트리를 버리고, 새로운 트리를 구축
   • 요소의 타입이 같은 경우
     ⇒ 동일한 내역은 유지, 변경된 속성만 변경
2. 자식에 대한 재귀적 처리, Key 속성
   • 두 트리에서의 자식들을 재귀적으로 처리할 때, 차례로 순회한다.
   • 하지만 이런식의 비교는, 하나의 값만 추가해도 모든 요소를 변경해야하는 비효율이 발생할 수 있다.

따라서, 이를 위해 key 속성을 활용한다.

⇒ key를 활용해 필요한 부분만 수정이 일어나서 효율적인 수행이 가능하다.

---

state와 props의 차이는 무엇인가?!

• React 내 컴포넌트에서 사용하는 두 속성은 무엇인지 알아보자.

state

• 변경 사항을 저장하기 위한 방식
• 컴포넌트 내부에 있는 상태를 의미한다.
• 기존에는 클래스 컴포넌트에서만 상태 관리가 가능했으나,
  useState가 생겨나면서 함수형 컴포넌트에서도 상태 관리가 가능하다.

상태 업데이트 함수로 인해, 값이 바뀌면 리렌더링하는 특징을 가진다.

props

• 부모 컴포넌트가 자식 컴포넌트에 전달하는 객체(데이터)
• 컴포넌트 외부로 전해지는 값을 의미한다.

자식에게 전달할 때, 값이 바뀌면 리렌더링하는 특징을 가진다.

---

✨ 출처

프론트엔드 기술 면접 질문
React, 재조정

---