React: componentDidUpdate에서 DOM 조작

안녕하세요, 이것은 질문에 가깝습니다. componentDidUpdate DOM 조작에 관한 토론을 열고 싶습니다.

React 플러그인을 만들고 있습니다. CSS는 이 플러그인이 수행해야 하는 모든 것을 다룰 만큼 강력하지 않기 때문에 일부 DOM 계산을 수행해야 합니다. 문제는 동일한 구성 요소에 의해 렌더링된 다른 DOM 요소의 getBoundingClientRect() 반환 값에 따라 일부 CSS 속성을 조정해야 한다는 것 입니다.

따라서 기술적으로 3가지 옵션이 있습니다.

1) getBoundingClientRect 에서 componentDidUpdate setState 를 계산하고 계산된 값으로

2) 1)과 같이 하고 shouldComponentUpdate 로 약간의 플레이를 하십시오. 그러나 이것은 매우 복잡하고 읽을 수 없는 것처럼 보입니다. 특정 사용 사례에 따라 많은 질문이 나타납니다.

3) componentDidUpdate에서 DOM을 업데이트합니다. 이것이 내가 결정한 솔루션이며 작동하며 간단하고 안정적이며 의도한 대로 작동합니다. 그러나 내가 가장자리에 있다고 느끼기 때문에 이것이 일을 하는 좋은 방법인지 다시 확인하고 싶었습니다. componentDidUpdate 에서 DOM을 조작해도 됩니까? render 가 완료될 때마다 호출되며 다음 render DOM을 다시 수정할 것이기 때문에 변경 사항을 버리는 것이 좋습니다.

다음은 코드의 일부입니다.

componentDidMount() {
  this.recalculateIndent();
}

componentDidUpdate() {
  this.recalculateIndent();
}

recalculateIndent() {
  // calculate indent based on getBoundingClientRect of some DOM reference
  this.textareaRef.style.textIndent = `${indent}px`;
}

render() {
   return (
   ...
   <textarea ref={ref => this.textareaRef = ref}/>
   ...
   );
}