React에서의 Reconciliation 및 ForwardRef 메커니즘

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

React 개발자, 특히 컴포넌트 업데이트 및 ref 관리에 관심 있는 중급 이상 개발자

핵심 요약

• Virtual DOM 트리 비교를 통해 실제 DOM의 불필요한 업데이트를 최소화하는 Reconciliation 메커니즘은 Virtual DOM의 diffing 알고리즘을 사용
• ForwardRef는 부모 컴포넌트에서 자식 DOM 요소에 직접 접근하기 위해 ref를 전달하는 Higher Order Component
• forwardRef를 사용할 때는 useRef로 생성한 ref 객체를 자식 컴포넌트에 전달하고, forwardRef HOC로 감싸야 함

```jsx

const MyButton = React.forwardRef((props, ref) => {props.children});

```

섹션별 세부 요약

1. Reconciliation 메커니즘

• Virtual DOM 트리 비교를 통해 실제 DOM 업데이트 최적화

- 컴포넌트: props와 state 변경 여부 확인

- 자식 요소: key 값이 동일한지 비교

- 요소 타입: 변경 여부 확인

• 실제 DOM 업데이트 비용이 높으므로 불필요한 변경만 처리
• 예시: count 상태 변경 시 태그만 업데이트

2. ForwardRef 사용 방법

• ref 객체 생성: useRef 또는 createRef 사용
• ref 전달: 자식 컴포넌트에 ref 객체 전달
• forwardRef HOC 사용: 자식 컴포넌트를 forwardRef로 감싸야 함

```jsx

const MyButton = React.forwardRef((props, ref) => {props.children});

```

• forwardRef의 render 함수: props와 ref 두 인자 전달
• ref 접근 제한: forwardRef 사용하지 않으면 자식 DOM 요소에 접근 불가

결론

• Virtual DOM의 diffing 알고리즘을 이해하면 성능 향상 가능
• forwardRef는 자식 컴포넌트의 DOM 요소에 직접 접근해야 할 때 필수
• key를 사용해 자식 요소 비교 최적화, forwardRef 사용 시 ref 전달 로직을 명확히 구조화해야 함