[ReactJS] DOM Element 접근

ref ?

 

리액트 세계에선 JSX로 마크업 표현이 다 가능한데 왜 굳이 DOM에 직접 접근을 해야하는가!

여러 경우가 있습니다!

 

- form태그에서 input에 focus할 때

- 특정 DOM의 크기/ 스크롤 위치를 가져오거나 설정할 때

- 외부 라이브러리를 사용할 때

 

---

portal?

 

ReactDOM.createProtal()을 리턴해 기존에 계속 id값이 container인 div태그 안의 범위에 있는 걸 벗어나서

페이지의 어느 Element든 직접 접근이 가능해집니다!

(포털을 사용함으로써 기존의 부모-자식으로 이뤄진 계층 구조를 벗어날 수 있다) 

class Container extends React.Component{
  render(){
    return(
    	<div>container jsx<div>,
    	destination
    )
  }
}

 
class ColorLabel extends React.Component {
 render() {
   return ReactDOM.createPortal(
     <p>출력될 JSX</p>, 
     document.querySelector('#header1')
   )
 }
}
      
ReactDOM.render(
  <div>
     <Container />
   </div>,
)

 

 

[참고]

velopert.com/1148