[TIL] useRef를 활용해 DOM 요소에 접근할 때 어느 과정에 접근할까?

 

이번 스프린트 작업 중에 useRef를 사용하면서 ref를 통해 언제 DOM 요소에 접근하는지에 대해 명확한 이해가 되지 않았었습니다.

먼저 React의 동작을 크게 두 단계로 나누어 설명해보겠습니다.

 

1. 렌더링 단계 (Rendering Phase)
   1. 렌더링 단계에서 계산된 변경사항들을 실제 DOM에 적용하는 단계입니다.
   2. 이 단계에서는 Virtual DOM을 구성하고, 컴포넌트의 업데이트 여부를 판단합니다.

2. 커밋 단계 (Commit Phase)
   1. 렌더링 단계에서 계산된 변경사항들을 실제 DOM에 적용하는 단계입니다.

 

💡

만약 렌더링 단계에 dom에 접근한다면 ?

1. 첫 렌더링 시 DOM 생성 전: 실제 dom이 아직 생성되지 않았기에 ref.current의 값은 null이 됩니다.

2. 업데이트 중 DOM 변경 전: 렌더링 단계에선 실제 DOM에 적용하지 않습니다. 그렇기에 변경되기 이전의 DOM을 접근하게 되빈다.

 

그래서 React는 커밋 단계(Commit Phase)에서 DOM에 접근합니다.

 

commit단계에선 실제 DOM에 변경된 내용이 반영되었기 때문에

변경된 DOM에 접근할 수 있습니다.

 

실제로 React에서는 commit단계에서 실제 DOM을 업데이트 하기전에 ref.current에 값을 null설정하고, 그 이후 DOM이 업데이트가 되면 즉각적으로 해당 DOM이 담깁니다.

 

DOM에 event Handler를 등록 하고 싶은경우엔

해당 dom에 event Handler를 등록 하고 싶은 경우 Effect내부에서 등록해주어야 하는 것을 이제는 이해가 됩니다.

 

1. 초기 렌더링 시 ref.current의 값은 null

2. 렌더링 이후 commit phase에서 해당 dom정보 담김

3. effect단계에서 해당 ref를활용해 dom에 event handler등록

 

 

결론

DOM에 접근하는 과정은 commit phase에서 일어납니다.

리엑트의 과정을 명확하게 이해하고 있으면 예상 가능한 어플리케이션을 만들 수 있습니다.

 

레퍼런스

https://react.dev/learn/manipulating-the-dom-with-refs#when-react-attaches-the-refs

 

 

Uploaded by

N2T