리액트를 다루는 기술-5 (ref)

ref는 어떤 상황에서 사용해야 할까?

• ref : Selector의 역할을 하는 것
  • selector에 대해서!!!!
• react에서 DOM에 접근하지 않고 상태를 변경함으로써 대부분 해결 할 수 있다.
• state만으로 해결할 수 없는 경우에 ref를 사용해야한다→ 어떤 상황에 필요한지 명확히하기
  • 특정 input에 포커스 주기
  • 스크롤박스 조작하기
  • canvas 요소에 그림 그리기
• → 어떤 상황 이후에 다른 돔 객체를 접근하여 변경해야할 경우?

---

ref 사용

• 함수 컴포넌트는 useRef라는 Hook이 있기 때문에 클래스 컴포넌트에서 적용 되는 방식으로 사용

1. 콜백 함수로 ref 설정

• 원하는 이름에 dom 객체를 할당 함
• ex) this.input, this.submit 등

class Component {
	render(){
		<input ref={(ref)=> this.input = ref}>
	}
}

2. createRef 로 ref 설정

• 콜백방식과 차이점은 .current로 접근해야 하는 것
• class Component { this.input= React.createRef() constructor(){ } handleFocusClick = (e) => { this.input.current.focus() } render(){ <input ref={this.input} type="text"/> <button onClick={}>focus</button> } }

---

컴포넌트에 ref 달기

• 자식 컴포넌트에 있는 ref를 부모 컴포넌트에서 사용 할 수 있음
• 각 화면의 크기를
• child 컴포넌트에 ref가 두개 있을 경우에 부모 컴포넌트에서 어떻게 리턴되어 사용할지?

class Child {	
	
	changeBottom = () => {
		//엘리먼트의 높낮이를 변경함
		this.element
	}

	render() {
		return <div ref={(ref)=>{this.element}}></div>
	}
}

class Component {
	...
	render() {
		return <>
			<Child ref={(ref) => {this.scrollAction = ref}}/>
			<button onClick={()=>{this.scrollAction.changeBottom()}}>childAction</button>
		</>
	}
}

<aside> 💡 ref를 다른 컴포넌트로 전달하는 것은 좋은 개발 방법이 아님

→ 엘리먼트를 다른 컴포넌트에서 접근 가능하다는 것 자체가 위험 함 → Context API나 redux로 해결 할 수 있다고 함

</aside>