A New Post
react v16.3이전에는 컴포넌트의 메소드에서 컴포넌트의 태그를 참조할때 Callback Refs를 사용했습니다. v16.3이후에는 createRef을 이용해서도 참조가 가능하다고 한다.
다음은 파일 업로드시Callback Refs과createRef를 사용한 예제다.
Callback Refs(v16.3 이전)
\_handleSubmit = e => {
e.preventDefault();
console.log("this.upload22.files[0]",this.upload22.files[0]);
}
<input type="file" ref={el => (this.upload22 = el)} />
<button type="submit" onClick={this._handleSubmit}>Upload Image22</button>ref={el => (this.upload22 = el)}
여기서 el이 자기자신을 가리키고 this는 컴퍼넌트를 가리켜 this.uplode22로 속성에 대입해서 컴퍼넌트에서 사용할 수 있게한다. 이 방법은 v16(현재)에서는 deprecated상태이고 v17에서 사라진다고 함.
createRef(v16.3 이후)
constructor(props) {
super(props);
this.upload22 = React.createRef();
}
\_handleSubmit = e => {
e.preventDefault();
console.log("this.upload22.current.files[0]",this.upload22.current.files[0]);
}
<input type="file" ref={this.upload22} />
<button type="submit" onClick={this._handleSubmit}>Upload Image22</button>ref={xx => (this.yy = xx)} 이 부분이 심플하게 ref={this.yy}로 바뀌었다.
반면 constructor에서 React.createRef()를 선언해줘야하고 사용시에 xx.current 프로퍼티를 경유해서 실제돔(HTMLElement)오브젝트에 접근이 가능하다.
언뜻 보면 선언해줘야할게 조금 늘어난거 같은데 왜이렇게 바뀐걸까??
Dan Abramov씨에 의하면 이하와 같은 이유가 있다고 한다.
It requires that React keeps track of currently rendering component (since it can’t guess this). This makes React a bit slower.
It doesn’t work as most people would expect with the “render callback” pattern (e.g. <DataGrid renderRow={this.renderRow} />) because the ref would get placed on DataGrid for the above reason.
It is not composable, i.e. if a library puts a ref on the passed child, the user can’t put another ref on it (e.g. #8734). Callback refs are perfectly composable.
Reference link: https://medium.com/@enro2414_40667/react-refs-%EA%B7%B8%EB%A6%AC%EA%B3%A0-dom-8900c72e7ab1 https://qiita.com/mori-dev@github/items/f54aded5d82276d866f5 https://solutionware.jp/blog/2018/07/25/react-%EF%BC%93%E3%81%A4%E3%81%AEref/