ref

우선 먼지 확인해보면 

Refs and the DOM 

Refs provide a way to access DOM nodes or React elements created in the render method. 

In the typical React dataflow, props are the only way that parent components interact with their children. To modify a child, you re-render it with new props. However, there are a few cases where you need to imperatively modify a child outside of the typical dataflow. The child to be modified could be an instance of a React component, or it could be a DOM element. For both of these cases, React provides an escape hatch. 

When to Use Refs 

There are a few good use cases for refs: 

• Managing focus, text selection, or media playback. 

• Triggering imperative animations. 

• Integrating with third-party DOM libraries. 

Avoid using refs for anything that can be done declaratively. 

For example, instead of exposing open() and close() methods on a Dialog component, pass an isOpen prop to it. 

 

출처: <https://reactjs.org/docs/refs-and-the-dom.html#creating-refs>  

 

내 케이스는 컴포넌트에 있는 node의 width를 받아와서 작업하는데 사용함 

 

constructor(props) { 

super(props) 

this.style 

this.gantt 

this.today = new Date() 

this.prevMonth = { display: "none"} 

this.nextMonth = { display: "none"} 

this.ref = React.createRef() 

this.state = { 

mouseEvent : false , 

} 

 

 

 

return <div  

className={className} id={isToday ? "today" : "otherDay" }  

onMouseOver={(event) =>{ this._overEvent(event) }} 

onMouseOut={(event) => { this._outEvent(event)  

}} 

onClick={(event) => { dayOnclick(event , this) } } 

onMouseDown={(event) =>{ dayOnMouseDown(event , this) 

// this.gantt = <span>&nbsp;</span> 

}} 

onMouseUp={(event) =>{ dayOnMouseUp(event , this)  

// this.gantt = <span>&nbsp;</span> 

}} 

style={this._customStyle() } 

ref={this.ref} 

>  

 

 

 

 React.createRef()<-- 16.3부터 바뀐점들 

 

let nextWidth = this.ref.current.clientWidth+'px' 

this.prevMonth = { display: "inline" } 

this.nextMonth = { display: "inline" , 

left : nextWidth} 

 

가로길이 받아와서 이걸로 스타일 변경함 

 

 

 

 

마지막 next버튼의 위치를 이걸로 결정함 

 

 

해상도가 바뀌어도 그위치 그대로여야함