section0. 11-ref

ref

현재까지는 state를 바꾸면 React가 알아서 화면을 변경해줬다. 그래서 우리가 직접 DOM을 참조할 필요가 없었지만 만약에 input에 focus를 주고 싶은 경우에는 어떻게 할까?

 

기존 바닐라에서는 아래와 같이 하면 됐다.

document.querySelector("input").focus();

하지만 React에서는 대부분 document.querySelector를 사용하지 않는다.

React가 화면을 컨트롤 할 수 있게 해주는 것이 중요하다. 

최대한 React가 제공해주는 것을 사용하자. 이때는 ref를 사용하면 된다.

 

input;

return (
...
<input ref={(c)=>{this.input = c;}} type="number" />
...
)

input을 선언하고, jsx에서 ref={(c) => {this.input = c; }}

 

input을 사용할 때는 js 부분에서 아래와 같이 사용 가능.

 

this.input.focus();

---

>>>> 따로 메서드로 빼면 아래와 같이 간편해진다.

onRefInput = (c) => {this.input = c;}

return (
	...
	<input ref={this.onRefInput} type="number" />
    ...
);

 

 

state를 변경했을 때 일어나는 일

setState를 할 때 reder()함수가 재호출되면서 리렌더가 일어난다.

해당 개념이 중요한 이유는 나중에 렌더를 너무 많이 하면 느려진다. render에 10초 걸리는 작업이 있다고 하면 state를 변경할 떄마다 10초씩 걸린다고 생각하면 된다.

 jsx부분의 onChange, onSubmit, ref 이런 부분도 모두 render()함수 위의 js 부분에 선언하는 것이 좋은 이유이다. 만약에 jsx 부분에 inline으로 onChange, onSubmit과 같은 함수를 작성해버리면 state를 변경할 때마다 똑같은 함수가 계속 생기게 된다. (state를 변경하면 render()가 재호출되기 때문)