[React] 1-10. document 를 접근하는 ref

ref

document.querySelector('input').focus()

위의 코드처럼 자바스크립트에서 직접 접근할 때는 보통 직접 'document' 키워드를 통해 접근하였지만,

리액트에서는 직접 document를 통해 접근하는일은 거의 없다.

리액트가 화면을 컨트롤 할 수 있게 하는 것이 좋다. 

리액트 개발을 하다보면 DOM 에 직접적인 접근을 해야 할 때가 있습니다. 그럴 때는 ref 라는것을 사용한다.

 

1. 아래 예와 같이 input 등에 focus를 해야할 때
2. 특정 DOM의 크기를 가져와야할 때
3. 외부 라이브러리(플레이어, 차트)를 사용할 때  

hello; // 클래스 선언
            
            render(){
                return (
                    <div>
                        <div>{this.state.first}곱하기{this.state.second}는?</div>
                        <form onSubmit={this.onSubmit}>
                            <input ref={(c) => {this.hello = c;}} type="number" value={this.state.value} onChange={this.onChange}/> 
                        
                            <button>입력!</button>
                        </form>
                        <div>{this.state.result}</div>
                    </div>
                    );
            }

ref 를 설정할땐 다음과 같이 DOM에 ref 속성을 설정한다. ref 를 파라미터로 가져와서 여기서 컴포넌트의 멤버변수로 설정하면 된다.

 

 <input ref={(c) => {this.hello = c;}}

 

 

dom을 직접 접근하고 싶으면 ref라는게 잇는데 클래스에 input을 선언한다. 그 ref를 통해 직접 접근할 수 있다. 

 

 

setState를 하면 render가 다시그러진다.

 onChange = (e) => { //따로 빼낼때는 화살표 함수를 써야한다.
                this.setState({value: e.target.value});
            }

            hello; // // dom을 직접 접근하고 싶으면 ref라는게 잇는데 클래스에 input을 선언한다. document.queryselector가 선택이 되서 
            

            render(){
                console.log(랜더링);
                return (
                    
                    <div>
                        <div>{this.state.first}곱하기{this.state.second}는?</div>
                        <form onSubmit={this.onSubmit}>
                            <input ref={(c) => {this.hello = c;}} type="number" value={this.state.value} onChange={this.onChange}/> 
                        
                            <button>입력!</button>
                        </form>
                        <div>{this.state.result}</div>
                    </div>
                    );
            }

setState를 할 때에는 render함수가 다시 실행된다.

this.setState를 하게 되면 render, 즉 화면이 다시 보여진다.

위에있는 onChange 함수같이 입력할때마다 value가 달라진다면,

render가 계속 실행되게 되는데

render를 너무 많이하면 느려지게 되어, 만약, render안에 시간 소요가 많이 되는 함수가 들어있으면 서비스가 유지될수가 없어서 조심해야한다.