useEffect와 document 객체: DOM 조작의 이해

DOM과 document 객체

• DOM
  • 웹 페이지의 구조를 트리 형태로 표현한 객체 모델
  • 브라우저는 DOM을 통해 문서의 요소를 조작할 수 있다.
• document
  • DOM 트리의 루트로, 전체 문서에 대한 접근을 제공
  • ex) document.getElementById나 document.querySelector를 사용해 특정 요소를 선택하고, 해당 요소의 속성이나 스타일을 변경

리액트의 컴포넌트 생명주기와 useEffect

• useEffect
  • 부수 효과(side effect)를 처리하기 위해 사용되는 훅
  • useEffect는 컴포넌트가 처음 렌더링된 후와 업데이트된 후에 실행
  • 컴포넌트의 렌더링이 완료된 후에 실행되므로, 이 시점에는 DOM이 이미 생성되어 있는 상태

DOM 접근과 useEffect

useEffect는 컴포넌트의 렌더링 후에 실행되기 때문에, DOM이 완전히 생성된 상태에서 실행
그러므로 이 시점에서 document 객체를 사용하여 DOM에 접근하고 조작할 수 있다.

예시

useEffect(() => {
  const element = document.getElementById('my-element');
  if (element) {
    element.style.backgroundColor = 'yellow';
  }
}, []);

위 예제에서는 컴포넌트가 렌더링된 후에 document.getElementById를 사용하여 특정 요소를 선택하고, 해당 요소의 배경색을 변경

결론

리액트의 useEffect 안에서 document 객체를 사용할 수 있는 이유는 useEffect가 컴포넌트의 렌더링 후에 실행되기 때문이다.
이 시점에는 DOM이 완전히 생성된 상태이므로, 안전하게 document 객체를 사용하여 DOM을 조작할 수 있다.
이를 통해 DOM을 조작하거나 외부 API 호출 등 다양한 부수 효과를 처리할 수 있다.